如何向 <marked-element> 添加语法高亮显示？答案

【问题标题】：How to add syntax highlighting to <marked-element>?如何向 <marked-element> 添加语法高亮显示？
【发布时间】：2016-07-13 20:29:49
【问题描述】：

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

阅读的文档时，它声明“ 支持此流程”，但不清楚如何一起使用它们。

在查看<prism-highlighter> source on the GitHub 时，给出的唯一演示是单独使用它时，以这种方式使用它会错过的所有好处。

我可以使用 .markdown 访问内容，但我不知道如何处理它并将其发回，并且每次尝试都失败了。

如何使用进行降价，同时添加语法高亮？

或者更改iron-demo-helpers' <demo-snippet> 以便我使用复制按钮获得漂亮的布局，但适用于不同的语言，例如 bash 和 python 脚本。（根据supported languages on the PrismJS website，两者都支持。）

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

【问题讨论】：

标签： polymer syntax-highlighting polymer-1.0 web-component custom-element

【解决方案1】：

在<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> 中的元素并为其设置样式。

【讨论】：

感谢您的回答，它告诉我这不是我做错的方式，而是我尝试使用的语言未包含在棱镜荧光笔或编译的 prism.js 文件。我会将您的答案标记为正确，因为它确实回答了问题，然后我也会发布我的问题的解决方案，但首先请您编辑它，以便在标记元素周围不使用棱镜荧光笔，而是在上面它是推荐的，并澄清 zzmarkdown 的用途，还是删除它？

【解决方案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。

由于我将 fork 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>

【讨论】：