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 주소

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

CKeditor 와 syntaxhighlight 는 joomla 코드 하 이 라 이 트 를 만 듭 니 다.

다음 에 고 칠 곳 을 붙 여 주세요!(Dreamweaver 로 이 파일 을 열 면 속도 가 빨 라 집 니 다.특히 검색)첫 번 째 js 코드 두 번 째 js 코드 는 이 두 군데 만 가능 합 니 다.코드 의 마지막...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

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

좋은 웹페이지 즐겨찾기