highlight.js를 사용하여 코드 강조 표시
- 巴扎黑원래의
- 2017-08-21 10:39:542378검색
이 글은 코드를 강조하기 위해 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">'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>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에 하이라이트 경로 구성을 추가하세요
'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를 사용하여 로드할 수 있습니다. , 프로젝트의 사용량이 적기 때문에 @import
@import "/lib/highlight/styles/tomorrow-night-eighties.css";
를 선택한 다음 html 페이지에 코드 테스트를 작성했습니다.
<body>
<p ng-include="'template/header.html'"></p>
<p>
<pre class="brush:php;toolbar:false">
<code class="lang-javascript">
function init(){
$scope.req.getArticle();
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}
</code>
