如何为<marked-element>添加语法高亮？

Question

如何为<marked-element>添加语法高亮？

polymersyntax-highlightingpolymer-1.0web-componentcustom-element

4

我一直在尝试使用<prism-highlighter>为<marked-element>添加语法高亮，但我完全不知道如何让它工作。

当阅读<prism-highlighter>的文档时，它指出“<marked-element>支持此流程”，但它并没有清楚地说明如何将它们结合使用。

当查看GitHub上的<prism-highlighter>源代码时，唯一给出的演示是单独使用它，这样使用会错过所有<marked-element>的好处。

我可以通过<marked-element>.markdown访问内容，但我无法弄清楚如何处理它并将其发送回来，而且每次尝试都失败了。

如何使用<marked-element>处理markdown，并添加语法高亮？

也许可以更改iron-demo-helpers'<demo-snippet>，以便我获得带有复制按钮的漂亮布局，但用于不同的语言，如bash和python脚本。（根据PrismJS网站支持的支持的语言。）

编辑：事实证明，我的错误不在于我的操作方式，而是使用的语言默认不受支持。已在下面发布解决方案作为答案。

- Jsilvermist

2个回答

2

原因是因为我没有意识到它只支持少数语言，所以它才不能正常工作。

我的解决方案是编辑/分叉prism + prism-element组件。（注意：如果您在不更改名称或目录的情况下编辑bower_components中的文件，则可能会在下次更新时丢失更改。）

我编辑了prism-element/prism-highlighter.html文件以包括其他语言：

if (lang === 'js' || lang.substr(0, 2) === 'es') {
  return Prism.languages.javascript;
} else if (lang === 'css') {
  return Prism.languages.css;
} else if (lang === 'c') {
  return Prism.languages.clike;
} else if (lang === 'bash') { // Check for bash markdown
  return Prism.languages.bash;
} else if (lang === 'python') { // Check for python markdown
  return Prism.languages.python;
} else {
...

在 prism/gulpfile.js 中导入更多的语言组件：

paths  = {
  componentsFile: 'components.js',
  components: ['components/**/*.js', '!components/**/*.min.js'],
  main: [
    'components/prism-core.js',
    'components/prism-markup.js',
    'components/prism-css.js',
    'components/prism-clike.js',
    'components/prism-javascript.js',
    'components/prism-bash.js', // Include bash component
    'components/prism-python.js', // Include python component
    'plugins/file-highlight/prism-file-highlight.js'
  ],
...

如果您更改了prism的名称/路径，请确保在prism-element/prism-import.html中更改相对路径。

然后在prism文件夹中运行npm install以安装依赖项，再运行gulp以运行gulpfile.js并编译为prism/prism.js。

由于我将我的分支命名为prism-highlighter-plus,所以我的最终代码看起来像这样：

<link rel="import" href="../../bower_components/marked-element/marked-element.html">
<link rel="import" href="../../bower_components/prism-element-plus/prism-highlighter-plus.html">

<dom-module id="backup-script">
  <template>
    <style>
      :host {
        display: block;
      }
      .markdown-html {
        overflow-x: auto;
      }
    </style>

    <prism-highlighter-plus></prism-highlighter-plus>

    <marked-element>
      <div class="markdown-html"></div>
      <script type="text/markdown">
        ```bash
        #!/bin/bash

        ...
        excluded_databases="Database|information_schema|performance_schema|mysql"
        databases=`mysql -u $mysql_user -p$mysql_password -Bse "SHOW DATABASES;" | egrep -v $excluded_databases`

        for db in $databases; do
          mysqldump -u $mysql_user -p$mysql_password --databases $db > $mysql_output/$today/$db.sql
        done
        ...
      </script>
    </marked-element>
  </template>
  <script>
    Polymer({
      is: 'backup-script'
    });
  </script>
</dom-module>

- Jsilvermist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

在 <prism-highlighter> 标签后插入带有您的代码的 <marked-element>，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="import" href="/bower_components/marked-element/marked-element.html">
    <link rel="import" href="/bower_components/prism-element/prism-highlighter.html">
</head>
<body>
    <prism-highlighter></prism-highlighter>
    <marked-element>
        <script type="text/markdown">
            ```html
            <div>yes</div>
            <i>
                console.log( "no log" )
            </i>
            ```
        </script>
    </marked-element>
</body>
</html>

高亮显示器将会检测并样式化 <marked-element> 元素内部的元素。