JS库之Highlight.js的用法详解
程序员文章站
2022-11-25 07:53:41
官网：
下载地址：
下载到本地后，新建个页面测试
1、在head中加入css和js的引用
hig...</div>
<div class="content">
<p>官网：</p>
<p>下载地址：</p>
<p>下载到本地后，新建个页面测试</p>
<p><strong>1、在head中加入css和js的引用</strong></p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</div>
<p><strong>2、添加对应要显示的内容</strong></p>
<div class="jb51code">
<pre class="brush: javascript;">
<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("\n","")
# 将文件指针定位到文件尾部
def feof(self):
self.fopen()
# 定位到文件末尾
self.hd.seek(0,2)
#设置指针位置
self.pos = self.hd.tell()
</code>
</pre> </pre>
</div>
<p>这里需要把要显示的内容放入到 <pre><code>这里放内容...</code></pre> 这种格式中</p>
<p>默认的话会智能识别，若是识别不出来是什么语言，就需要在<code>标签中加入class</p>
<p>例如 <code><pre><code class="java" >xxx</code></pre> </code>即可</p>
<p>下载的时候可以选择你需要的语言，然后再打包，下载后会发现有个style文件夹，里面放了各种不同的显示颜色，为了看看都是些什么样子</p>
<p>我这里弄了个可以选择样式的页面</p>
<p>代码如下</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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("\n","")
# 将文件指针定位到文件尾部
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> </pre>
</div>
<p>效果图：</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="JS库之Highlight.js的用法详解" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODE3MDg5Mjc2LmpwZw==" style="font-size: medium; font-family: simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px" title="JS库之Highlight.js的用法详解"></p>
<p style="text-align: center"><span style="color: #ff0000"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="JS库之Highlight.js的用法详解" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODE3MDg1NTc2LmpwZw==" style="font-size: medium; font-family: simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px" title="JS库之Highlight.js的用法详解"></span></p>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
<p>以上所述是小编给大家介绍的js库之highlight.js的用法详解，希望对大家有所帮助
</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1926024.html">
Linux使用git检出一个单独的分支的方法 </a>
</p>
<p>
下一篇： <a href="/article/1926026.html">
使用mint-ui开发项目的一些心得(分享) </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2128586.html" target="_blank" title="php数组转换js数组操作及json_encode的用法详解">
<h2>
php数组转换js数组操作及json_encode的用法详解 </h2>
</a>
</li>
<li>
<a href="/article/2126395.html" target="_blank" title="详解Js里的for…in和for…of的用法">
<h2>
详解Js里的for…in和for…of的用法 </h2>
</a>
</li>
<li>
<a href="/article/2112212.html" target="_blank" title="vue.js的computed,filter,get,set的用法及区别详解">
<h2>
vue.js的computed,filter,get,set的用法及区别详解 </h2>
</a>
</li>
<li>
<a href="/article/2112003.html" target="_blank" title="js中this的常见用法详解">
<h2>
js中this的常见用法详解 </h2>
</a>
</li>
<li>
<a href="/article/2088239.html" target="_blank" title="详解Spring Data JPA系列之投影（Projection）的用法">
<h2>
详解Spring Data JPA系列之投影（Projection）的用法 </h2>
</a>
</li>
<li>
<a href="/article/2084648.html" target="_blank" title="Tensorflow之Saver的用法详解">
<h2>
Tensorflow之Saver的用法详解 </h2>
</a>
</li>
<li>
<a href="/article/2059597.html" target="_blank" title="JavaScript封装的常用工具类库bee.js用法详解【经典类库】">
<h2>
JavaScript封装的常用工具类库bee.js用法详解【经典类库】 </h2>
</a>
</li>
<li>
<a href="/article/2052397.html" target="_blank" title="numpy库与pandas库axis=0，axis= 1轴的用法详解">
<h2>
numpy库与pandas库axis=0，axis= 1轴的用法详解 </h2>
</a>
</li>
<li>
<a href="/article/2040600.html" target="_blank" title="Require.js的基本用法详解">
<h2>
Require.js的基本用法详解 </h2>
</a>
</li>
<li>
<a href="/article/2040049.html" target="_blank" title="node.js express中app.param的用法详解">
<h2>
node.js express中app.param的用法详解 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>