탭 에 있 는 JavaScript 코드 의 하 이 라이트 디 스 플레이 플러그 인
현재 키워드,문자열,주석,정규 표현 식 의 하 이 라 이 트 를 지원 합 니 다.현재 논 리 는 간단 할 수 있 으 며 나중에 계속 완 선 될 것 입 니 다.
사용 예시:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/js-highlighter.css"/>
</head>
<body>
<pre class="highlighter">
//this is comment
var me = "tjuking";
var reg = /[0-9]*/g;
</pre>
<script src="js/js-highlighter.js"></script>
</body>
</html> head 탭 에 CSS 파일 을 도입 하고 body 탭 이 끝나 기 전에 JS 파일 을 도입 해 야 하 며 밝 은 pre 탭 에 class 값'highlighter'를 추가 해 야 합 니 다.
JS 코드:
(function(doc){
var hls = getHighlighters("highlighter");
for(var i=0; i<hls.length; i++){
var content = hls[i].innerHTML;
var varReg = /([^\w\.\$_])(break|case|catch|continue|debugger|default|delete|do|else|finally|for|function|if|in|instanceof|new|return|switch|this|throw|try|typeof|var|void|while|with)([^\w])/g;
var strReg = /(".*?")|('.*?')/g;
var commentReg = /([^\\]\/\/.*)|(\/\*(.|
\r|
)*\*\/)/g;
var regReg = /[^<](\/.+?[^<]\/[gim])/g;
content = content.replace(strReg, "<span class='hl-st'>$&</span>");
content = content.replace(regReg, "<span class='hl-rg'>$&</span>");
content = content.replace(commentReg, "<span class='hl-cm'>$&</span>");
content = content.replace(varReg, "$1<span class='hl-kw'>$2</span>$3");
//IE8 innerHTML ， pre hack
hls[i].innerHTML = "<pre>" + content + "</pre>";
}
// JavaScript
function getHighlighters(searchClass) {
var classElements = [],
els = document.getElementsByTagName("pre"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for(i=0, j=0; i<elsLen; i++){
if(pattern.test(els[i].className)){
classElements[j] = els[i];
j++;
}
}
return classElements;
}
})(document);IE8 및 아래 버 전에 서 innerHTML 을 사용 하여 pre 탭 에 있 는 텍스트 를 가 져 올 때 줄 바 꿈 을 잃 어 버 립 니 다.외부 에 pre 라벨 을 추가 하면 이 문 제 를 해결 할 수 있 습 니 다.
CSS 배색:
.hl-cm{
color: #5C8026;
}
.hl-cm .hl-st, .hl-cm .hl-kw, .hl-cm .hl-rg{
color: #5C8026;
font-weight: normal;
}
.hl-st{
color: #0000FF;
}
.hl-st .hl-kw, .hl-st .hl-rg, .hl-rg .hl-cm{
color: #0000FF;
}
.hl-rg{
color: #DAA520;
}
.hl-rg .hl-kw, .hl-rg .hl-st, .hl-rg .hl-cm{
color: #DAA520;
font-weight: normal;
}
.hl-kw{
color: #A52A2A;
font-weight:bold;
}
각 일치 하 는 우선 순위 관 계 를 주의해 야 합 니 다.끼 워 넣 을 때 가장 바깥쪽 색 을 기준 으로 합 니 다.
다운로드 코드 는 첨부 파일 을 보 세 요.문제 가 있 으 면 개인 적 으로 연락 하 세 요~
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
