Comment mettre en évidence des échantillons de code à travers AngularJS en utilisant Prismjs et TinyMCE

J'ai un plugin tinyMCE dans mon application angulaire où l'utilisateur peut insérer du code dans une base de données mysql.Comment mettre en évidence des échantillons de code à travers AngularJS en utilisant Prismjs et TinyMCE

Je souhaite mettre en évidence les codes insérés récupérés dans ma base de données. Pour cette raison, j'ai utilisé prismjs comme TinyMCE l'utilise par default. Je suis capable de personnaliser et de mettre en évidence un échantillon de code directement avec TinyMCE. Mais une fois inséré dans la base de données et de récupérer pour l'affichage, l'exemple de code could't être mis en évidence, bien que je prism.css et importé prism.js aussi bien dans mon 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>

Voici un exemple de une chaîne de résultat de ma base de données:

<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: SO parse il, normalement la balise balise div juste au-dessus est enveloppé par:

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

S'il vous plaît ce que je peux faire?

Source

2017-02-05 kabrice

Veuillez ajouter la chaîne de résultats que vous obtenez de la base de données. – lin

Fait, voir le édit s'il vous plaît – kabrice

Je crois que vous devez insérer les données en tant que chaîne non échappée dans TinyMCE. Avez-vous essayé cela? – lin

Lorsque le contenu est chargé sur une page Web « régulière » vous devez vous assurer de deux choses:

fichiers de Prism sont chargés sur la page
Vous dites Prism pour rechercher la page et le balisage contenu qui est un échantillon de code.

La première partie est question ici:

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

En particulier, vous devez disposer d'un CSS et le fichier JS sur la page:

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

Si vous avez ce sur la page avant le HTML à mettre en évidence est chargé qui devrait être tout ce que vous devez faire. Si vous chargez le code que vous pouvez dynamiquement dire manuellement Prism pour rechercher la page pour le code de balisage:

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

La commande Prism.highlightAll() racontera Prism pour rechercher la page entière et sa magie sur tous les échantillons de code.

Source

2017-02-07 15:39:43

Incroyable! Ca marche vraiment super bien Thx – kabrice

Comment mettre en évidence des échantillons de code à travers AngularJS en utilisant Prismjs et TinyMCE

Répondre

Questions connexes