Prism 코드 하 이 라이트 수정 코드 태그 지원 없 음

WordPress 에 바 이 두 의 UEditor 편집 기 를 추가 한 후,자체 코드 플러그 인 을 사용 할 때 코드 바깥쪽 에 pre 태그 만 추가 하기 때 문 입 니 다.그림:

그러나 실제 Prism 하 이 라 이 트 는 다음 과 같은 형식의 지원 이 필요 합 니 다.

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

따라서 pre 에 code 태그 가 없 는 상황 을 지원 하기 위해 파일 Prism.js 에서 highlight All 을 찾 아 다음 코드 를 수정 합 니 다.

....

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);
  //}
    
  //   PRE   ，   
  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);
    }
   }
}

....

수정 후 진행 Js 압축 하고 원본 파일 을 덮어 쓰 고 WordPress UEditor 중간 에 삽 입 된 코드 는 전단 페이지 에 하 이 라이트 로 표 시 됩 니 다.
Prism 하 이 라이트 홈 페이지 주소:http://prismjs.com/
Prism GitHub  주소