js 사용 하 이 라이트.js 하 이 라이트 코드

다른 사람의 블 로 그 를 둘 러 볼 때 다른 사람의 코드 를 보 는 예 는 하 이 라이트 문법 을 사 용 했 습 니 다.자바,js,phop 등 언어 는 자동 으로 키 워드 를 하 이 라이트 합 니 다.
그래서 며칠 전에 자신 이 블 로 그 를 썼 는데 코드 를 만 났 을 때 자 연 스 럽 게 다른 사람의 사이트 가 어떻게 예 쁜 지 생각 났 어 요.바라 바라.
본 격 적 인 장난 을 시작 했다.
장난 치기 전에 다른 사이트 에 가서 봤 어 요.여기에 약 서 를 붙 이 는 효과:

그 중의 키워드,방법 명,문자열 은 모두 다른 색깔 을 가지 고 있다.비록 이 코드 는 매우 밝 고 보기 좋 지 는 않 지만 그런대로 괜찮다.그래서 document 을 보 러 갔 는데 이렇게 되 었 습 니 다.


<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">'18'</span>,<span class="hljs-string">'  '</span>,<span class="hljs-string">' '</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">'  '</span>,age<span class="hljs-string">'18'</span>,sex:<span class="hljs-string">' '</span>});</code></pre>

hljs？？이 물건 이 틀림 없어.그래서 우리 의 주인공:highlight.js 를 찾 았 다.
highlight.js 홈 페이지
highlightjs 의 용법 은 홈 페이지 에서 직접 볼 수 있 습 니 다.
여기 서 나 는 주로 내 가 사용 하 는 과정 에서 어떤 구 덩이 를 밟 았 는 지,그리고 최종 적 인 해결 방법 을 썼 다.
1.마음 이 급 하면 뜨 거 운 두 부 를 먹 지 못 하고 모든 일 을 시작 하 는 것 이 가장 어렵다.
홈 페이지 의 doc 에 따 르 면 세 줄 의 코드 만 있 으 면 사용 할 수 있 습 니 다.매우 편리 합 니 다.스스로 작은 demo 테스트 를 썼 습 니 다.그래도 효과 가 있 습 니 다.


<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 를 불 러 옵 니 다.전체 응용 은 angular 의 프레임 워 크 를 사용 합 니 다.
직접 이렇게 쓰 면 규범 에 맞지 않 으 므 로 코드 를 바 꾸 고 require.js 를 사용 하여 highlight.js 를 불 러 옵 니 다.
require.config 에 하 이 라이트 경로 설정 추가

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

require 의 리 셋 함수 에서 hljs.initHighlightingOnLoad()를 실행 합 니 다.

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

css 는 링크 를 통 해서 도 less 의@import 로 불 러 올 수 있 습 니 다.프로젝트 가 less 를 사 용 했 기 때문에@import 를 선 택 했 습 니 다.

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

그리고 html 페이지 에 code 테스트 를 작성 합 니 다.


<body>
    <div ng-include="'template/header.html'"></div>
    <div>
      <pre>
        <code class="lang-javascript">
    function init(){
      $scope.req.getArticle();
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    }
        </code>
      </pre>
    </div>
    <div class="content" ui-view></div>
    <footer>cloud blog by@ermu </footer>
  </body>

그리고 브 라 우 저 를 열 어 보 니:

회색 은 항상 완벽 하 다.
그러나 배경 에서 돌아 오 는 문 서 를 표시 하기 위해 ng-bind-html 를 사 용 했 을 때:

코드 가 전혀 밝 지 않 습 니 다.잘 생각해 보면,


hljs.initHighlightingOnLoad();

onload 때 렌 더 링 을 실행 하 는 것 이 아 닙 니까?그 다음 에 document 을 바 꾸 면 실행 되 지 않 습 니 다.그래서 인터페이스 에서 가 져 온 문서 의 코드 를 강조 할 수 없 음 이 분명 하 다.
구 글 이 한 번 보 니 angular-highlightjs 라 는 것 이 있 습 니 다.사용 을 시 도 했 지만 계속 잘못 보 고 했 습 니 다.홈 페이지 에 도 설명 문서 가 없습니다.
다행히 코드 가 github 위 에 위탁 되 어 위 에 올 라 가 보 니 사용 설명 이 홈 페이지 만큼 짧 고 issues 에서 도 이 문 제 를 묻 는 사람 이 없 었 습 니 다.그래서 저 는 물 어 봤 습 니 다.누군가가 대답 할 수 있 기 를 바 랍 니 다.문제 주소
하 이 라이트.js 는 반드시 대응 하 는 방법 을 제공 할 것 이 라 고 생각 합 니 다.로 딩 이 끝 난 후에 한 번 더 실행 할 수 있 지만 어 쩔 수 없 이 api 문 서 는 영어 로 되 어 있어 서 힘 들 게 보고 다른 방법 을 생각 할 것 입 니 다.
최종 적 으로 문 제 를 해결 하 는 방법 은 인터페이스 가 highlight.js 로 컴 파일 된 html 를 되 돌려 주 는 것 입 니 다.백 엔 드 는 node 를 사용 하기 때문에 cnode 포럼 에서 검색 해 보 니 marked 가 이 문 제 를 해결 한 것 을 발 견 했 습 니 다.
marked 설정 에 highlight 항목 만 추가 하면 됩 니 다.(npm install highlight.js 먼저)


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;
 }
});

돌아 오 는 문서 에 대응 하 는 class 가 추가 되 었 습 니 다.


<pre>
<code class="lang-js">
<span class="hljs-keyword">var</span> math = (<span class="hljs-string">'math'</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>
</pre>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

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

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

React (gatsby.js)에서 highlight.js 사용

구현 highlight.js를 추가합니다. 이번에는 ES6 이상으로 씁니다. 더욱 초보적인 곳을 알고 싶은 분은 이번에는 코드 하이라이트를 사용할 기회가 기사의 페이지에서 밖에 사용하지 않기 때문에, Util적인 것...

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

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

js 사용 하 이 라이트.js 하 이 라이트 코드

좋은 웹페이지 즐겨찾기