Как добавить подсветку синтаксиса в «отмеченный элемент»?

Я пытался добавить подсветку синтаксиса в ‹marked-element›, используя ‹prism-highlighter›, но я совершенно не понимаю, как это получить работать.

При чтении документации для ‹prism-highlighter› говорится: «Этот поток поддерживается ‹marked-element›», но неясно, как использовать их вместе.

При просмотре исходного кода ‹prism-highlighter› на GitHub единственная приведенная демонстрация предназначена для используя его отдельно, и используя его таким образом, вы упустите все преимущества ‹marked-element›.

Я мог получить доступ к содержимому с помощью ‹marked-element›.markdown, но я не могу понять, как его обработать и отправить обратно, и все попытки сделать это не увенчались успехом.

Как использовать ‹marked-element› для уценки, а также добавить подсветку синтаксиса?

Или, возможно, измените демонстрационный фрагмент ‹demo-helpers›. так что я получаю хороший макет с кнопкой копирования, но для разных языков, таких как скрипты bash и python. (Оба из них поддерживаются в соответствии с поддерживаемыми языками на веб-сайте PrismJS.)

Редактировать: оказалось, что неправильно было не то, как я это делал, а то, что язык, который я использовал, не поддерживался по умолчанию. Опубликовано решение как ответ ниже.


web-component custom-element polymer syntax-highlighting polymer-1.0
person Jsilvermist    schedule 26.03.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вставьте <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>.

person Supersharp    schedule 26.03.2016
comment
Спасибо за ответ, он показал мне, что неправильно было не то, КАК я это делаю, а то, что язык, который я пытался использовать, не был включен ни в prism-highlighter, ни в скомпилированный файл prism.js. Я отмечу ваш ответ как правильный, поскольку он действительно отвечает на вопрос, а затем я также опубликую решение моей проблемы, но сначала не могли бы вы отредактировать его так, чтобы вместо отмеченного элемента вокруг призмы-подсветки он был выше это в соответствии с рекомендациями, и уточните, для чего предназначен zzmarkdown, или удалите его? - person Jsilvermist; 26.03.2016

arrow_upward
2
arrow_downward

Итак, причина, по которой он не работал, заключается в том, что я не понимал, что он был закодирован в элементе для поддержки только нескольких языков.

Мое решение состояло в том, чтобы отредактировать/разветвить компоненты 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>
person Jsilvermist    schedule 26.03.2016