JS 라 이브 러 리 의 Highlight.js 사용법 상세 설명
9541 단어 highlight.js사용법
다운로드 주소:https://highlightjs.org/
로 컬 에 다운로드 한 후 새 페이지 테스트
1.head 에 css 와 js 의 인용 을 추가 합 니 다.
<head>
<title>highlight</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="styles/default.css" rel="external nofollow" rel="external nofollow" >
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<pre>
<code class="python">
#
def fread(self):
# ，
self.filename = self.getLogPath()
if not os.path.isfile(self.filename):
while not self.checkfile() :
time.sleep(5)
self.filename = self.getLogPath()
self.fclose()
self.fopen()
self.pos = 0
self.hd.seek(self.pos,0)
fline = self.hd.readline()
self.pos = self.hd.tell()
return fline.replace("
","")
#
def feof(self):
self.fopen()
#
self.hd.seek(0,2)
#
self.pos = self.hd.tell()
</code>
</pre> 여기에 내용 을...기본적으로 스마트 인식 이 됩 니 다.어떤 언어 인지 인식 되 지 않 으 면
탭 에 class 를 추가 해 야 합 니 다.
예 를 들 면<pre><code class="java" >xxx</code></pre> 다운로드 할 때 필요 한 언어 를 선택 하고 포장 할 수 있 습 니 다.다운로드 한 후에 style 폴 더 가 있 습 니 다.그 안에 다양한 디 스 플레이 색상 이 들 어 있 습 니 다.어떤 모습 인지 보기 위해 서 입 니 다.
제 가 스타일 을 선택 할 수 있 는 페이지 를 만 들 었 어 요.
코드 는 다음 과 같다.
<html>
<head>
<title>highlight</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="styles/default.css" rel="external nofollow" rel="external nofollow" >
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="changeStyleSelect"></div>
PHP
<hr>
<pre><code class="php">
class Test {
private $name;
private $age;
public function __construct($array) {
$this->name = $array['name'];
$this->age = $array['age'];
}
public function getName() {
return $this->name;
}
public function setName($name) {
$this->name = $name;
}
public function getAge() {
return $this->age;
}
public function show() {
printf('my name is %s,age is %d',$this->name,$this->age);
}
}
</code></pre>
javascript
<hr>
<pre>
<code class="javascript">
test = {
name : function () {
return 'hello';
},
age : function () {
return 13;
}
}
</code>
</pre>
python
<hr>
<pre>
<code class="python">
#
def fread(self):
# ，
self.filename = self.getLogPath()
if not os.path.isfile(self.filename):
while not self.checkfile() :
time.sleep(5)
self.filename = self.getLogPath()
self.fclose()
self.fopen()
self.pos = 0
self.hd.seek(self.pos,0)
fline = self.hd.readline()
self.pos = self.hd.tell()
return fline.replace("
","")
#
def feof(self):
self.fopen()
#
self.hd.seek(0,2)
#
self.pos = self.hd.tell()
</code>
</pre>
java
<hr>
<pre>
<code class="java">
package l2f.gameserver.model;
import java.util.ArrayList;
public abstract class L2Character extends L2Object {
public static final Short ABNORMAL_EFFECT_BLEEDING = 0x0_0_0_1; // not sure
public void moveTo(int x, int y, int z) {
_ai = null;
_log.warning("Should not be called");
if (1 > 5) {
return;
}
}
/** Task of AI notification */
@SuppressWarnings( { "nls", "unqualified-field-access", "boxing" })
public class NotifyAITask implements Runnable {
private final CtrlEvent _evt;
List mList = new ArrayList()
public void run() {
try {
getAI().notifyEvent(_evt, _evt.class, null);
} catch (Throwable t) {
t.printStackTrace();
}
}
}
}
</code>
</pre>
<script>
styleArr = ["agate.css","androidstudio.css","arduino-light.css","arta.css","ascetic.css","atelier-cave-dark.css","atelier-cave-light.css","atelier-dune-dark.css","atelier-dune-light.css","atelier-estuary-dark.css","atelier-estuary-light.css","atelier-forest-dark.css","atelier-forest-light.css","atelier-heath-dark.css","atelier-heath-light.css","atelier-lakeside-dark.css","atelier-lakeside-light.css","atelier-plateau-dark.css","atelier-plateau-light.css","atelier-savanna-dark.css","atelier-savanna-light.css","atelier-seaside-dark.css","atelier-seaside-light.css","atelier-sulphurpool-dark.css","atelier-sulphurpool-light.css","brown-paper.css","codepen-embed.css","color-brewer.css","dark.css","darkula.css","default.css","docco.css","dracula.css","far.css","foundation.css","github.css","github-gist.css","googlecode.css","grayscale.css","gruvbox-dark.css","gruvbox-light.css","hopscotch.css","hybrid.css","idea.css","ir-black.css","kimbie.dark.css","kimbie.light.css","magula.css","mono-blue.css","monokai.css","monokai-sublime.css","obsidian.css","paraiso-dark.css","paraiso-light.css","pojoaque.css","purebasic.css","qtcreator_dark.css","qtcreator_light.css","railscasts.css","rainbow.css","school-book.css","solarized-dark.css","solarized-light.css","sunburst.css","tomorrow.css","tomorrow-night.css","tomorrow-night-blue.css","tomorrow-night-bright.css","tomorrow-night-eighties.css","vs.css","xcode.css","xt256.css","zenburn.css"];
selectHtml = [];
selectHtml.push('<select id="changeStyle">');
for(i in styleArr) {
OptionValue = styleArr[i];
selectHtml.push('<option value="' + OptionValue +'" >'+ OptionValue +'</option>');
}
selectHtml.push('</select>');
selectHtmlString = selectHtml.join("");
document.getElementById('changeStyleSelect').innerHTML = selectHtmlString;
obj = document.getElementById('changeStyle');
obj.addEventListener("change",function(event){
var value = this.options[this.options.selectedIndex].value;
l = document.createElement('link');
l.setAttribute('href','styles/'+value);
l.setAttribute('rel','stylesheet');
document.head.appendChild(l);
});
</script>
</body>
</html>
효과 그림:
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JS 라 이브 러 리 의 Highlight.js 의 용법 에 대한 상세 한 설명 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
