Surligner le code à l'aide de highlight.js

Cet article présente principalement js pour utiliser highlight.js pour mettre en valeur votre code. C'est très pratique. Les amis qui en ont besoin peuvent s'y référer

En parcourant les blogs d'autres personnes, j'ai vu les codes d'autres personnes. L'exemple utilise la syntaxe en surbrillance. Qu'il s'agisse de java, js, php, etc., les mots-clés seront automatiquement surlignés.

J'ai donc écrit un blog il y a quelques jours. Lorsque j'ai découvert le code, j'ai naturellement pensé à la beauté des sites Web des autres, bla bla.

Le bricolage formel a commencé.

Allez consulter d'autres sites internet avant de bricoler. Voici l'effet du collage du petit livre :

Les mots-clés, les noms de méthodes et les chaînes ont des couleurs différentes, bien que le code ne soit pas très bien mis en évidence, pas mal. Je suis donc allé regarder le document et j'ai trouvé ça :

<pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">name,age,sex</span>) </span>{
  <span class="hljs-built_in">console</span>.log(name+age+sex);
}
<span class="hljs-comment">//要是我这样传,name就成了18，age成了王二了。</span>
getPersonInfo(<span class="hljs-string">&#39;18&#39;</span>,<span class="hljs-string">&#39;王二&#39;</span>,<span class="hljs-string">&#39;男&#39;</span>);
<span class="hljs-comment">//所以可以这样写</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">args</span>)</span>{
  <span class="hljs-built_in">console</span>.log(args.name+args.age+args.sex);
}
getPersonInfo({name:<span class="hljs-string">&#39;王二&#39;</span>,age<span class="hljs-string">&#39;18&#39;</span>,sex:<span class="hljs-string">&#39;男&#39;</span>});</code>

hljs ? ? C'est définitivement ça. Nous avons donc trouvé notre protagoniste : highlight.js.

Site officiel de highlight.js

L'utilisation de highlightjs peut être directement consultée sur le site officiel

Ici, j'écris principalement sur quels pièges j'ai marché pendant l'utilisation, et les solution de résultats finaux.

1. Si vous avez trop hâte de manger du tofu chaud, le début est la chose la plus difficile

Selon la doc sur le site officiel, il vous en faut seulement trois lignes de code pour l'utiliser, c'est très pratique et vous pouvez le faire. J'ai écrit une petite démo et je l'ai testée. Toujours très efficace.

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="external nofollow" rel="stylesheet"> 
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 
<script >hljs.initHighlightingOnLoad();</script>

Le cdn fourni par bootstarp est utilisé ici. Vous pouvez accéder au cdn directement via la connexion ci-dessus et sélectionner la version requise. C'est aussi simple que cela.

Cette palette de couleurs n'est pas très bonne non plus. Si vous souhaitez de belles couleurs, vous pouvez vous référer directement au site officiel. https://highlightjs.org/static/demo/

2. S'il est facile à utiliser, il doit être appliqué dans le développement réel

C'est si simple de l'appliquer et je suis très heureux, donc il a été appliqué au projet.

En conséquence, j'ai rencontré des *problèmes....

Le projet utilise require.js pour charger js, et l'ensemble de l'application utilise le framework angulaire.

Si vous l'écrivez directement comme ça, il n'est évidemment pas conforme aux spécifications, vous changez donc le code et utilisez require.js pour charger highlight.js.

Ajouter la configuration du chemin de surbrillance dans require.config

'highlight':'http://cdn.bootcss.com/highlight.js/8.0/highlight.min',

Exécuter hljs.initHighlightingOnLoad();

dans la fonction de rappel de require

require(loadList, function ($, angular) {
    $(function () {
      angular.bootstrap(document, ['blogApp']);
    });
    hljs.initHighlightingOnLoad();
  });

css est toujours chargé via le lien, ou vous pouvez utiliser @import de less pour le charger. Parce que le projet utilise moins, j'ai choisi @import

.

@import "/lib/highlight/styles/tomorrow-night-eighties.css";

Écrivez ensuite un test de code sur la page html :

<body>
    <p ng-include="&#39;template/header.html&#39;"></p>
    <p>
      <pre class="brush:php;toolbar:false">
        <code class="lang-javascript">
    function init(){
      $scope.req.getArticle();
      $(&#39;pre code&#39;).each(function(i, block) {
        hljs.highlightBlock(block);
      });
    }
        </code>
      

cloud blog by@ermu

Puis ouvrez le navigateur et jetez un œil :

Tellement parfait.

Mais lorsque vous utilisez ng-bind-html pour afficher le document renvoyé depuis l'arrière-plan :

Le code n'est pas du tout mis en surbrillance. Réfléchissez bien,

hljs.initHighlightingOnLoad();

n'est pas le rendu exécuté lors du chargement, c'est-à-dire que toute modification apportée au document après cela ne sera pas exécutée . Donc évidemment cela ne peut pas mettre en évidence le code du document récupéré depuis l'interface.

Je l'ai recherché sur Google et j'ai trouvé quelque chose appelé angulaire-highlightjs. J'ai essayé de l'utiliser, mais il n'arrêtait pas de signaler des erreurs et il n'y avait aucune documentation sur le site officiel

Heureusement, le code était hébergé. sur github, alors j'y suis allé. Après l'avoir regardé, j'ai trouvé que le mode d'emploi est aussi court que le site officiel. Personne n'a posé cette question sur des problèmes, alors j'ai demandé, en espérant que quelqu'un puisse répondre : Adresse de la question

.

Je pense que highlight.js doit fournir celui correspondant. La méthode peut être exécutée une fois le chargement terminé, mais malheureusement le document API est en anglais et il est difficile à lire, j'ai donc décidé de penser à d'autres méthodes.

La solution finale au problème est que l'interface renvoie du HTML compilé à l'aide de highlight.js. Parce que le backend utilise node, j'ai cherché sur le forum cnode et j'ai trouvé que Mark avait résolu ce problème.

Il vous suffit d'ajouter l'élément en surbrillance dans la configuration marquée (npm install highlight.js en premier) :

var marked = require('marked');
var highlight = require('highlight.js');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
  return highlight.highlightAuto(code).value;
 }
});

Le document renvoyé a été La classe correspondante a été ajoutée.

<pre class="brush:php;toolbar:false">
<code class="lang-js">
<span class="hljs-keyword">var</span> math = (<span class="hljs-string">&#39;math&#39;</span>) ;
<span class="hljs-keyword">export</span>.increment = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>{
  <span class="hljs-keyword">return</span> math.add(val,<span class="hljs-number">1</span>)
}
</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!