highlight.js를 사용하여 코드 강조 표시-JS 튜토리얼-php.cn

highlight.js를 사용하여 코드 강조 표시

巴扎黑

풀어 주다： 2017-08-21 10:39:54

원래의

2431명이 탐색했습니다.

이 글은 코드를 강조하기 위해 highlight.js를 사용하는 js를 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

다른 사람들의 하이라이트를 사용하는 코드의 예를 보았습니다. java, js, php 또는 기타 언어이든 문법은 자동으로 키워드를 강조 표시합니다.

그래서 며칠전에 블로그에 글을 쓰게 되었는데, 코드를 접하면서 자연스럽게 다른 분들의 웹사이트가 얼마나 아름다운지 생각이 나더라구요.

공식적인 팅커링이 시작되었습니다.

교체하기 전에 다른 웹사이트로 가서 확인해 보세요. 짧은 책을 붙여넣었을 때의 효과는 다음과 같습니다.

키워드, 메소드 이름, 문자열이 모두 다른 색상으로 표시되어 있지만 코드가 크게 강조되지는 않았지만 무난합니다. 그래서 문서를 보러 가서 다음을 발견했습니다:

<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? ? 확실히 이것이다. 그래서 우리는 주인공인highlight.js를 찾았습니다.

highlight.js 공식 홈페이지

highlightjs의 사용법은 공식 홈페이지에서 직접 보실 수 있습니다

여기에서는 주로 사용하면서 겪은 함정과 최종 해결 방법을 적어보겠습니다.

1. 뜨거운 두부를 먹기가 너무 불안하다면 시작이 가장 어렵다

공식 홈페이지에 있는 문서에 따르면 코드 세 줄만 있으면 사용이 매우 편리하다고 합니다. 테스트하기 위해 작은 데모를 작성했습니다. 여전히 매우 효과적입니다.

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

로그인 후 복사

여기에서는 bootstarp에서 제공하는 CDN을 사용합니다. 위의 연결을 통해 CDN에 직접 접속하여 필요한 버전을 선택하면 됩니다. 그렇게 간단합니다.

이 배색도 별로 안 예쁘네요. 예쁜 색상을 원하시면 공식 홈페이지를 직접 참고하시면 됩니다. https://highlightjs.org/static/demo/

2.사용하기 쉬우면 실제 개발에 적용해야죠

적용하기 너무 쉽고 너무 만족스러워서 신청했어요 프로젝트에 넣습니다.

결과적으로 *문제가 발생했습니다....

프로젝트는 require.js를 사용하여 js를 로드하고 전체 애플리케이션은 각도 프레임워크를 사용합니다.

이렇게 직접 작성하면 당연히 사양을 따르지 않으므로 코드를 변경하고 require.js를 사용하여highlight.js를 로드합니다.

require.config에 하이라이트 경로 구성을 추가하세요

&#39;highlight&#39;:&#39;http://cdn.bootcss.com/highlight.js/8.0/highlight.min&#39;,

로그인 후 복사

require 콜백 함수에서 hljs.initHighlightingOnLoad()를 실행하세요.

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

로그인 후 복사

css는 여전히 링크를 통해 로드되거나 less의 @import를 사용하여 로드할 수 있습니다. , 프로젝트의 사용량이 적기 때문에 @import

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

로그인 후 복사

를 선택한 다음 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>

로그인 후 복사

그런 다음 브라우저를 열고 살펴보았습니다.

매우 완벽한.

그러나 ng-bind-html을 사용하여 백그라운드에서 반환된 문서를 표시하는 경우:

코드가 전혀 강조 표시되지 않습니다. 주의 깊게 생각해 보세요. 온로드 중에는 렌더링을

hljs.initHighlightingOnLoad();

로그인 후 복사

실행하지 않습니다. 즉, 그 이후의 문서 변경 사항은 실행되지 않습니다. 따라서 인터페이스에서 검색된 문서의 코드를 강조할 수는 없습니다.

구글에서 angular-highlightjs라는 것을 찾았는데, 계속해서 오류가 발생했습니다. 다행히도 코드가 github에 호스팅되어 있어서 살펴보았습니다. 그리고 지침과 공식 웹사이트도 마찬가지로 짧고 문제에 대해 이 질문을 하는 사람이 없어서 누군가가 대답할 수 있기를 바라면서 질문했습니다. 질문 주소

내 생각에는 하이라이트.js가 이에 상응하는 방법을 제공해야 한다고 생각합니다. 로딩이 완료된 후 한 번만 실행해야 하는데 아쉽게도 API 문서가 영어로 되어 있어 읽기가 어려워서 다른 방법을 생각해 보기로 했습니다.

문제에 대한 최종 해결책은 인터페이스가 하이라이트.js를 사용하여 컴파일된 HTML을 반환한다는 것입니다. 백엔드가 노드를 사용하기 때문에 cnode 포럼에서 검색한 결과 마크가 이 문제를 해결한 것으로 나타났습니다.

표시된 구성에 하이라이트 항목만 추가하면 됩니다(npm installhighlight.js 먼저):

var marked = require(&#39;marked&#39;);
var highlight = require(&#39;highlight.js&#39;);
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;
 }
});

로그인 후 복사

반환된 문서에는 해당 클래스가 이미 추가되어 있습니다.

rreee

위 내용은 highlight.js를 사용하여 코드 강조 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!