【前端】向blog或网站中添加语法高亮显示代码方法总结
向blog或网站中添加语法高亮显示的代码方法总结
文章目录
- 预备知识
- 目标
- 第一类方法：嵌入
- 第二类方法：外部引用
- 第三类方法：忽略HTML和PHP
最近在写代码时遇到一个问题，就是如何让代码像在IDE或专业编译器一样能够高亮显示在网页或博客中（如下图显示），上网查了很多资料，下面是我对学习到的方法的归纳总结。
下面的方法基本上都是利用第三方javascript插件实现的，因此不必担心方法有多难，只要拿过来使用就可以了。在讲述方法之前先介绍一下与之条件：
预备知识
- HTML和CSS的基本知识
目标
- 在博客或网页中让嵌入代码高亮显示.
- 在Wordpress中自动忽略HTML和PHP代码.
方法主要有两类，一种是引入第三方的JavaScript和高亮语法插件，让pre和code标签中的代码高亮显示，另一种方法是直接嵌入主流网站的语法代码。
第一类方法：嵌入
嵌入方式是最方便快捷的，很多网站都提供了代码导出的功能，它可以自动引入专业网站的高亮代码显示方式，美观大方。
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>github代码嵌入</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<style type="text/css">
div{
margin: 8px;
}
</style>
</head>
<body>
<h1>github代码嵌入</h1>
<div>
<script src="https://gist.github.com/dragonir/b3b43d791c259b597907069020f4b754.js"></script>
</div>
</body>
</html>
实现效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>codepen代码嵌入</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
</head>
<body>
<h1>Codepen代码嵌入</h1>
<pre>
<p data-height="265" data-theme-id="dark" data-slug-hash="MogbxY" data-default-tab="result" data-user="dragonir" data-embed-version="2" data-pen-title="MogbxY" class="codepen">See the Pen <a href="https://codepen.io/dragonir/pen/MogbxY/">MogbxY</a> by dragonir (<a href="https://codepen.io/dragonir">@dragonir</a>) on <a href="https://codepen.io">CodePen</a>.</p>
</pre>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
实现效果：
第二类方法：JavaScript高亮插件
通过引入代码高亮显示插件，同样可以实现博客以及其他网站嵌入代码的高亮显示，以下是几种主流的方法。我只展示了基本的使用方法，想详细了解使用方法和接口，可以点击链接到官网。
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>网页嵌入代码语法高亮</title>
<meta charset="utf-8"> <!--
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
--> <link rel="stylesheet" type="text/css" href="./highlight/styles/railscasts.css">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<script src="./highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Highlight.js</h1>
<pre>
<code class="javascript">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre> </body>
</html>
实现效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>prism.js</title>
<meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<link rel="stylesheet" type="text/css" href="./prism/prism.css">
<script src="./prism/prism.js"></script>
</head>
<body>
<h1>prism.js</h1>
<pre>
<code class="language-javascript">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre> </body>
</html>
实现效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>prettify.js</title>
<meta charset="utf-8"> <!--
Include the script tag below in your document:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
See Getting Started to configure that URL with options you need.
Look at the skin gallery and pick styles that suit you.
--> <!--
Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed.
--> <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<script src="./prettify/loader/run_prettify.js"></script>
</head>
<body>
<h1>prettify.js</h1>
<pre>
<code class="prettyprint">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre>
</body>
</html>
实现效果：
第三类方法：忽略HTML和PHP
为了显示HTML和PHP代码，浏览器必须要将显示的代码自动忽略，你可以使用在线转换工具 Free Online HTML Escape Tool来转换你需要显示的HTML代码。如果你是用的博客是wordPress的博客，WordPress plugin 可以实现此功能，但是它无法和Prism.js同时使用。
总结
现在就在你的博客或网站中嵌入好看的代码吧，如果你想了解更多有用的WordPress的功能，推荐访问this is the resource for you.
转载请标明出处：http://www.cnblogs.com/dragonir/p/7426965.html，作者：Dragonir ，欢迎转载。
【前端】向blog或网站中添加语法高亮显示代码方法总结的更多相关文章
- Word文档中的语法高亮显示代码
有时候我们程序员也需要在word文档里面显示代码,但是直接复制过去 不好看,格式也不太对,这里给大家分享一个Word文档中的语法高亮显示代码的方法 http://www.planetb.ca/synt ...
- Wordpress网站中添加百度统计代码
百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...
- TogetherJS – 酷！在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
- 在html中添加script脚本的方法和注意事项
在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择 在html中添加<script& ...
- 如何在Eclipse中添加Servlet-api.jar的方法
方法一: 点击窗口->首选项->java->构建路径->类路径变量->新建:将你的tomcat目录下的common/lib/servlet.jar加进来.如果你建立了一个 ...
- Android开发过程中在sh，py，mk文件中添加log信息的方法
Android开发过程中在sh,py,mk文件中添加log信息的方法 在sh文件中: echo "this is a log info" + $info 在py文件中: print ...
- VS中添加预处理宏的方法
VS中添加预处理宏的方法 除了在.c及.h中添加宏定义之外,还可以采用如下方法添加宏定义: 1.若只需要定义一个宏(如#define DEBUG),可以右键点击工程-->属性-->c/c+ ...
- 详解VMware 虚拟机中添加新硬盘的方法
一.VMware新增磁盘的设置步骤 (建议:在设置虚拟的时候,不要运行虚拟机的系统,不然添加了新的虚拟磁盘则要重启虚拟机) 1.选择“VM”----“设置”并打开,将光标定位在“硬盘(SCSI)”这一 ...
- 百家搜索：在网站中添加Google、百度等搜索引擎
来源:http://www.ido321.com/1143.html 看到一些网站上添加了各种搜索引擎.如Google.百度.360.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键 ...
随机推荐
- 优雅的封装ajax，含跨域
之前写过一篇 先定一个小目标,自己封装个ajax,是基于原生js的,也就是jquery中ajax的简化版本实现的思路.众所周知,jquery的ajax是项目中最常用的请求后台的方式,也算是封装的很完美 ...
- JavaScript一个google地图获取
<script type="text/javascript"> /** * 返回一个新创建的<img>元素,该元素用于在获取到地理位置信息后,显示一张Goo ...
- 20170717_python_爬虫_网页数据解析_BeautifulSoup_数据保存_pymysql
上午废了老大劲成功登陆后,下午看了下BeautifulSoup和pymysql,晚上记录一下 自己电脑装的sublime,字体颜色竟然拷贝不下来 - - 写的过程中遇到了很多问题: 1.模拟登陆部分 ...
- public/private/protected的具体区别
在说明这四个关键字之前,我想就class之间的关系做一个简单的定义,对于继承自己的class,base class可以认为他们都是自己的子女,而对于和自己一个目录下的classes,认为都是自己的朋友 ...
- net.sz.framework 框架 ORM 消消乐超过亿条数据排行榜分析 天王盖地虎
序言 天王盖地虎, 老婆马上生孩子了,在家待产,老婆喜欢玩消消乐类似的休闲游戏,闲置状态,无聊的分析一下消消乐游戏的一些技术问题: 由于我主要是服务器研发,客户端属于半吊子,所以就分析一下消消乐排行榜 ...
- C指针1
//定义:指针是一个特殊的数据类型,指针指向内存中的地址,因此,指针变量存储的是内存中的一个地址 //例子,%p表示打印一个地址,打印p表示打印p指向的地址 //输出结果为0x7fff5fbff7dc ...
- InputStreamReader读取文件出现乱码
当你读取一个文本文件时,如果是在电脑记事本上面写的,然后保存.使用InputStreamReader读取出来,并且是按照他的编码格式读取出来,发现还是存在乱码,比如文本内容是“你好”,读出来显示是“? ...
- LAP+mysql-主从+redis
Redis是一个开源的,内存中的数据结构存储系统,他可以用作数据库,缓存和消息中间介.支持多种类型数据库结构,如字符串(strings),散列(hashes),列表(lists),集合(sets),有 ...
- Code Complete
一.<代码大全>优先阅读参考顺序: 自学编程人:第07章 高质量的子程序 低年级学生:第11章 变量命名的力量 高年级学生:第08章 防御式编程 初级程序员:第18章 表驱动法 高级程序员 ...
- java大数判断相等
java大数判断相等: 1.equals()方法2.compareTo()方法区别:2.00与2.0 equals()方法判断不等,compareTo()方法判断相等,科学的说法可以看java api ...