4

私は<marked-element><prism-highlighter>を使ってシンタックスハイライトを追加しようとしていましたが、これを動作させる方法を完全に失っています。 <marked-element>に構文ハイライトを追加するには?

<プリズム、蛍光ペン>のドキュメントを読んで、それは「この流れは<マーク要素>によってサポートされている」と述べたが、一緒にそれらを使用する方法については明確ではありません。

<prism-highlighter> source on the GitHubに目を通すときは、それを単独で使用する場合のデモだけです。この方法を使用すると、の<というメリットがすべて失われます。

マーク付きの要素> .markdownでコンテンツにアクセスできましたが、どのように処理して戻すのか分かりません。

マークダウンのためにマーク付き要素>をどのように使用し、構文の強調表示も追加しますか?

または、iron-demo-helpers' <demo-snippet>を変更して、コピーボタンで素敵なレイアウトを得ることができますが、bashやpythonスクリプトなどのさまざまな言語に対応できます。 (どちらもsupported languages on the PrismJS websiteに従ってサポートされています)

編集:それは私が間違っていたのではなく、使用していた言語がデフォルトではサポートされていないことが判明しました。回答を以下のように投稿してください。

答えて

4

だけで以下のように、<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>内の要素を検出し、スタイルします。

+0

おかげで、それは、それは間違っていたこと、私はそれをやったかではなかったことを私に示しました。私が使用しようとしていた言語は、プリズム・ハイライターまたはコンパイルされたprism.jsファイルには含まれていませんでした。私はあなたの答えを正しいものとしてマークするでしょう。質問に答えてから問題を解決しますが、最初にそれを編集して、マーク付き要素を取り囲むプリズム・ハイライターを使うのではなく、 zzmarkdownが何を意味するのかを明確にしたり、それを削除したりすることができますか? – Jsilvermist

2

だから私はそれがいくつかの言語をサポートするために要素でコード化されていたことを認識しなかったので、それが動作していない理由があります。

私のソリューションは、プリズム+プリズム要素のコンポーネントを編集/フォークすることでした。 (注:名前またはディレクトリを変更せずに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に依存関係をインストールするには、とgulpgulpfile.jsを実行し、prism/prism.jsにコンパイルします。

私はフォークプリズム蛍光ペンプラスと名付けているので、私の最終的なコードは次のようになります。答えを

<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> 
関連する問題