0

我的 Angular 应用程序中有一个 tinyMCE 插件，用户可以在其中将代码插入 mysql 数据库。

我想突出显示从我的数据库中检索到的那些插入代码。

出于这个原因，我使用了 prismjs，因为 TinyMCE默认使用它。我可以直接使用 TinyMCE 自定义和突出显示代码示例。但是一旦插入数据库并检索它进行显示，尽管我在 index.html 中也导入了 prism.css 和 prism.js，但代码示例无法突出显示：

<!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：所以解析它，通常上面的标签 div 标签被包裹：

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

请问我该怎么办？

4

1 回答 1

1

当内容加载到“常规”网页上时，您需要确保两件事：

  1. Prism 的文件加载到页面上
  2. 您告诉 Prism 搜索作为代码示例的页面和标记内容。

第一部分在这里讨论：

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 之前在页面上有这个，那么您需要做的就是全部。如果您正在动态加载代码，您可以手动告诉 Prism 在页面中搜索要标记的代码：

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

该Prism.highlightAll()命令将告诉 Prism 搜索整个页面并在任何代码示例上发挥其魔力。

于 2017-02-07T15:39:43.650 回答