JS库之Highlight.js的用法详解


Posted in Javascript onSeptember 13, 2017

官网:https://highlightjs.org/

下载地址:https://highlightjs.org/download/

下载到本地后,新建个页面测试

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>

2、添加对应要显示的内容

<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><code>这里放内容...</code></pre>  这种格式中

默认的话会智能识别,若是识别不出来是什么语言,就需要在<code>标签中加入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("\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>

效果图:

JS库之Highlight.js的用法详解

JS库之Highlight.js的用法详解

总结

以上所述是小编给大家介绍的JS库之Highlight.js的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
node.js中 stream使用教程
Aug 28 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
详解wow.js中各种特效对应的类名
Sep 13 #Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 #Javascript
JS库之Waypoints的用法详解
Sep 13 #Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 #Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
You might like
十天学会php之第八天
2006/10/09 PHP
PHP实现懒加载的方法
2015/03/07 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
vue.js todolist实现代码
2017/10/29 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python内置数据类型详解
2014/08/18 Python
自己使用总结Python程序代码片段
2015/06/02 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
计算机应届毕业生自荐信范文
2014/02/23 职场文书
2014全年工作总结
2014/11/27 职场文书
质检员工作总结2015
2015/04/25 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
SQL写法--行行比较
2021/08/23 SQL Server