【前端】向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.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键 ...
随机推荐
- php中curl的使用（一）
cURL 是一个利用URL语法规定来传输文件和数据的工具,PHP的curl是通过libcurl库与服务器使用各种类型的协议,如HTTP.FTP.TELNET等. PHP curl函数 curl_clo ...
- Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎
前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...
- js继承之Object.create()
通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...
- Android之ListView优化
关于ListView几个方面的优化: ListView的大小设定固定值; 复用convertView, 使用ViewHolder提高在容器中查找组件的效率; 使用分页加载; 快速滚动时, item不显 ...
- （转）mybatis：动态SQL
概述:在mybatis中,动态语句是个非常强大和灵活的功能,并且动态语句可以放在sql的任何地方,利用该功能,我们可以写出非常灵活的代码.在mybatis的动态语句中常常可能会用到以下几个运算和逻辑判 ...
- (转)Memcached 在windows下的java使用
Memcached 在windows下的java使用 研究这个东东主要是为了解决在教务管理中选课系统的大并发情况下数据库频繁读写造成速度慢的问题,但要使用WEB服务器的内存,是不是可靠还需要验证, ...
- 支付宝分库分表中间件--zdal简介
中间件, 如果仅仅作为一名用户的话, 主要关注一下如何使用即可, 大多数情况下也就是配置. 下面简单的介绍一下支付宝的分库分表中间件--->zdal在web项目中的配置. 1, 在网上查阅相关资 ...
- [NOI2005] 维护数列
[NOI2005] 维护数列 题目 传送门 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际输入文件中的空格) 操作编号 输入文件中的格式 说明 1 ...
- [补档]暑假集训D4总结
考试 爆零了,不开心,打了两道自己以为是正解的东西,打了两道样例骗分,结果发现并没有给样例分= =,自己以为的正解也打挂了,所以就很= = 但是没办法啊,自己弱也不能怪谁,考试这东西有时候也很玄学. ...
- linux下更改ssh登录前的banner信息
默认情况下,telnet ip 22端口会显示 openssh的版本信息 whereis sshd 如 cp /usr/sbin/sshd /usr/sbin/sshd2016.bak sed -i ...