Wie füge ich Syntax Highlighting zu <marked-element> hinzu?

Ich habe versucht, Syntaxhervorhebung zu <marked-element> mit <prism-highlighter> hinzuzufügen, aber ich bin bei einem vollständigen Verlust, wie man dies zum Funktionieren bringt.Wie füge ich Syntax Highlighting zu <marked-element> hinzu?

Wenn die Dokumentation für < Prisma-Highlighter Lesen > heißt es „Diese Strömung durch < markiert-Element unterstützt wird >“, ist aber nicht klar, wie man sie zusammen verwenden.

Wenn Sie in die <prism-highlighter> source on the GitHub schauen, ist die einzige Demo, die gegeben wird, wenn Sie es alleine benutzen, und es auf diese Weise verwendend würde alle Vorteile von < markierten Element > verpassen.

kann ich den Inhalt mit < markiert-Elemente > .markdown zugreifen, aber ich kann nicht herausfinden, wie ich es verarbeiten würde und es zurück, und jeder Versuch, dies nicht getan senden.

Wie verwende ich < markierte-Element > für die Markdown, und fügen Sie auch Syntax-Highlighting?

Oder vielleicht ändern Sie die iron-demo-helpers' <demo-snippet>, so dass ich das schöne Layout mit der Schaltfläche "Kopieren", aber für verschiedene Sprachen wie Bash und Python-Skripte. (Welche sind beide unterstützt nach der .)

Edit: Es stellt sich heraus, dass es nicht, wie ich es tat, dass war falsch, aber dass die Sprache, die ich verwendete, wurde nicht standardmäßig unterstützt. Angepasste Lösung als Antwort unten.

Quelle

2016-03-26 Jsilvermist

Legen Sie die <marked-element> mit Ihrem Code nach dem <prism-highlighter> Tag, wie unten:

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

Der Highlighter werden die Elemente innerhalb des <marked-element> erkennen und Stil.

Quelle

2016-03-26 15:08:04 Supersharp

Danke für die Antwort, es zeigte mir, dass es nicht, wie ich tat es, das falsch war, aber die Sprache, die ich benutzen wollte, war weder im Prismen-Highlighter noch in der kompilierten prism.js-Datei enthalten. Ich werde Ihre Antwort als richtig markieren, da sie die Frage beantwortet, und dann werde ich auch die Lösung für mein Problem posten, aber zuerst können Sie es bearbeiten, so dass Prisma-Textmarker das markierte Element umgibt, es ist oben es als empfohlen, und erklären, was der zzmarkdown soll, oder entfernen Sie es? – Jsilvermist

Der Grund, warum es nicht funktionierte, ist, weil ich nicht erkannte, dass es im Element kodiert wurde, um nur einige Sprachen zu unterstützen.

Meine Lösung bestand darin, die Prismen + Prismenelemente zu bearbeiten/aufzuteilen. (Hinweis: Wenn Sie die Dateien innerhalb bower_components bearbeiten, ohne den Namen oder das Verzeichnis ändern Sie die Änderungen bei der nächsten Aktualisierung verlieren kann)

ich die prism-element/prism-highlighter.html Datei bearbeitet weitere Sprachen sind:

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

Die prism/gulpfile.js zu importieren mehr Sprachkomponenten:

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' 
    ], 
...

Wenn Sie den Namen/Pfad von prism verändert, stellen Sie sicher, um die relativen Pfade in prism-element/prism-import.html ändern .

dann im prism Ordner laufen npm install Abhängigkeiten zu installieren, und gulp zu prism/prism.jsgulpfile.js und kompilieren laufen.

Da ich meine Gabel Prisma-Highlighter-plus, mein letzter Code sieht wie folgt benannt:

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

Quelle

2016-03-26 19:18:01 Jsilvermist

Wie füge ich Syntax Highlighting zu <marked-element> hinzu?

Antwort

Verwandte Themen