I have a tinyMCE plugin in my angular app where the user can insert code into a mysql database.
I want to highlight those inserted codes retrieved from my database.
For that reason, I used prismjs as TinyMCE uses it by default. I'm able to customize and highlight a code sample directly with TinyMCE. But once inserted in the database and retrieve it for displaying, the code sample could't be highlighted although I imported prism.css and prism.js as well in my index.html:
<!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>
Here is an example of a result string from my database:
<pre class="language-markup"><code><div class="alert alert-danger" id="question-error" role="alert" ng-if="showQuestionError">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="showQuestionError=false">
<span aria-hidden="true">&times;</span>
</button>
<strong>Erreur ! Merci de vérifier que le titre de la question : </strong>
<ul >
<li>Se termnine par un point d'interrogation (?).</li>
<li>Ne dépasse pas 150 caractères.</li>
<li>Et n'est pas vide.</li>
</ul>
</div></code></pre>
PS: SO parses it, normally the tag div tag just above is wrapped by :
<pre class="language-markup"></pre>
Please what can I do ?
When the content is loaded on a "regular" web page you need to make sure of two things:
The first part is discussed here:
https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage
In specific you need to have a CSS and JS file on the page:
If you have this on the page before the HTML to be highlighted is loaded that should be all you need to do. If you are loading the code dynamically you can manually tell Prism to search the page for code to markup:
http://prismjs.com/extending.html#api
The
Prism.highlightAll()command will tell Prism to search the entire page and do its magic on any code samples.