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

Question

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

阅读的文档时，它指出 "This flow is supported by <marked-element>"，但不清楚如何一起使用它们。

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

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

如何使用作为 markdown，同时添加语法高亮？

或者更改 iron-demo-helpers' <demo-snippet> so that I get the nice layout with the copy button, but for different languages like bash and python scripts. (Which are both supported according to the supported languages on the PrismJS website。）

编辑：原来不是我的做法有问题，而是默认情况下不支持我使用的语言。在下面发布解决方案作为答案。

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

Answer 2

所以它不起作用的原因是因为我没有意识到它在元素中被编码为仅支持几种语言。

我的解决方案是 edit/fork 棱镜 + 棱镜元素组件。（注意：如果您编辑 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 的 name/path，请确保更改 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>

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

How to add syntax highlighting to <marked-element>?

polymer

syntax-highlighting

polymer-1.0

web-component

custom-element