Geek Answers Handbook

How to add syntax highlighting to <marked element>?

I am trying to add syntax highlighting to the <marked item> using <prism-highlighter> , but I will completely lose how to make this work.

When reading the documentation for <prism-highlighter>, she states: "This thread is supported by the <marked element>", but it is unclear how to use them together.

When viewing the <prism-highlighter> source on GitHub , the only demo is for use alone, and using it this way will miss all the benefits of the <marked item>.

I could access the content with the <marked> .markdown, but I cannot figure out how I will process it and send it back, and every attempt to do this failed.

How to use <labeled item> for markdowns, as well as add syntax highlighting?

Or maybe change the "iron-demo helpers" <demo-snippet> to get a nice layout with a copy button, but for different languages ​​like bash and python scripts. (Which are supported according to the supported languages ​​on the PrismJS website .)

Edit: It turns out I did not do it wrong, but the language that I used was not supported by default. Added solution as answer below.

+4
2

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

+4

, , , , , .

, / + . (. 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.

--, :

<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>
+2

More articles:


All Articles