1. ホーム
  2. Web プログラミング
  3. ウェブ編集者

Prismコードハイライトの変更にCodeタグのサポートは含まれません。

2022-01-20 12:05:52

WordPressにBaiduのUEditorエディターを追加した後、コードプラグインを使用すると、図のようにコードの外層にpreタグが追加されるだけとなります。

しかし、実際のPrismのハイライト表示では、次のような形式のサポートが必要です。

<pre class="language-numbers language-csharp">
  <code>
    //Highlighted code
  </code>
</pre>

そこで、preにcodeタグがない場合に対応できるように、Prism.jsというファイルのhighlightAllを調べ、以下のようにコードを変更します。

....

highlightAll: function(async, callback) {

  //var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*=" lang-"], [class*="lang-"] code');
  // for (var i=0, element; element = elements[i++];) {
  // _.highlightElement(element, async === true, callback);
  //}
    
  // support PRE tags, modify to
  var clsReg = /\s*\blanguage-\b\s*/;
  var pres = document.querySelectorAll("pre");
  for (var i = 0, pre; pre = pres[i++];) {
    var isCode = false;
    if ((pre.firstChild 
    && (isCode = (pre.firstChild.tagName === "CODE")) 
    && clsReg.test(pre.firstChild.className)) 
    || clsReg.test(pre.className)) {
      if (!isCode) pre.innerHTML = "<code>" + pre.innerHTML + "</code>";
      _.highlightElement(pre.firstChild, async === true, callback);
    }
   }
}

....

WordPress UEditorで挿入したコードは、Js圧縮後、元のファイルを上書きすると、フロントエンドのページでハイライトされます。

Prismは、公式サイトのアドレスをハイライト表示します。 http://prismjs.com

PrismのGitHubアドレスです。 https://github.com/PrismJS