PrismjsとTinyMCEを使ってAngularJSを使ってコードサンプルをハイライトする方法

私は、あなたがmysqlデータベースにコードを挿入できる私の角型アプリケーションにtinyMCEプラグインを持っています。PrismjsとTinyMCEを使ってAngularJSを使ってコードサンプルをハイライトする方法

データベースから取得した挿入コードを強調したいと思います。

このため、TinyMCEがdefaultで使用するプリズムを使用しました。 TinyMCEを使用してコードサンプルを直接カスタマイズして強調表示することができます。私は私のindex.htmlの中にもprism.cssとprism.jsを輸入しているがしかし、一度データベースに挿入し、表示するためにそれを取得し、コードサンプルcould'tを強調表示すること：ここでは

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="prism.css" rel="stylesheet" /> 
     //... 
    </head> 
    //... 
    <body> 
     //... 
     <script src="angular_1_6.min.js"></script> 
     <script src="MyCtrl.js"></script> 
     <script src="prism.js"></script> 
    </body> 
</html>

は例です私のデータベースから結果文字列：

<pre class="language-markup"><code>&lt;div class="alert alert-danger" id="question-error" role="alert" ng-if="showQuestionError"&gt; 
     &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="showQuestionError=false"&gt; 
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; 
     &lt;/button&gt; 
     &lt;strong&gt;Erreur ! Merci de v&eacute;rifier que le titre de la question : &lt;/strong&gt; 
     &lt;ul &gt; 
      &lt;li&gt;Se termnine par un point d'interrogation (?).&lt;/li&gt; 
      &lt;li&gt;Ne d&eacute;passe pas 150 caract&egrave;res.&lt;/li&gt; 
      &lt;li&gt;Et n'est pas vide.&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/div&gt;</code></pre>

PS：私は何を行うことができますしてください

<pre class="language-markup"></pre>

：SO通常タグdivタグがちょうど上記で包まれ、それを解析し？

出典

2017-02-05 kabrice

DBから受け取った結果の文字列を追加してください。 – lin

完了、喜んでください – kabrice

私はあなたがTinyMCEに非エスケープ文字列としてデータを挿入する必要があります。あなたはそれを試しましたか？ – lin

内容は次の2つのもののことを確認する必要があり、「通常の」Webページにロードされます。

プリズムのファイルが
ページにロードされているあなたは、ページやマークアップを検索するためのプリズムを伝えますコードサンプルであるコンテンツ。

最初の部分は、ここで議論されています。具体的には

https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage

は、ページ上のCSSやJSファイルを持っている必要があります：

<link rel="stylesheet" type="text/css" href="prism.css"> 
<script src="prism.js"></script>

あなたは上でこれを持っている場合ハイライトされるHTMLがロードされる前に、そのページをロードする必要があります。あなたがコードを動的にロードしている場合は、手動でマークアップするためのコードのページを検索するためにプリズムを伝えることができます。

http://prismjs.com/extending.html#api

をPrism.highlightAll()コマンドは、ページ全体を検索し、任意のコードサンプルでその魔法を行うためにプリズムを教えてくれます。

出典

2017-02-07 15:39:43

素晴らしい！それは本当に素晴らしいスーパーThxを動作させる – kabrice

PrismjsとTinyMCEを使ってAngularJSを使ってコードサンプルをハイライトする方法

答えて

関連する問題