Question

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

在阅读＆lt; prism-highlighter＆gt;的文档时，它会声明“此流程由＆lt; marked-element＆gt;”支持，但不清楚如何一起使用它们。

在查看<prism-highlighter> source on the GitHub时，给出的唯一演示是单独使用它时，以这种方式使用它会遗漏＆lt; marked-element＆gt;的所有好处。

我可以使用＆lt; marked-element＆gt; .markdown访问内容，但我无法弄清楚我将如何处理并将其发回，并且每次尝试都会失败。

我如何使用＆lt; marked-element＆gt;对于降价，还添加语法高亮？

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

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

Answer 1

在<marked-element>标记后面插入代码<prism-highlighter>，如下所示：

<!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

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

我的解决方案是编辑/分叉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>

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

2 个答案: