设为首页 加入收藏

TOP

【前端】向blog或网站中添加语法高亮显示代码方法总结(一)
2017-10-10 15:22:35 】 浏览:8323
Tags:前端 blog 网站 添加 语法 高亮 显示 代码 方法 总结

 

 向blog或网站中添加语法高亮显示的代码方法总结

 

文章目录

  1. 预备知识
  2. 目标
  3. 第一类方法:嵌入
  4. 第二类方法:外部引用
  5. 第三类方法:忽略HTML和PHP

 

  最近在写代码时遇到一个问题,就是如何让代码像在IDE或专业编译器一样能够高亮显示在网页或博客中(如下图显示),上网查了很多资料,下面是我对学习到的方法的归纳总结。

 

 

  下面的方法基本上都是利用第三方java script插件实现的,因此不必担心方法有多难,只要拿过来使用就可以了。在讲述方法之前先介绍一下与之条件:

 

预备知识

  • HTML和CSS的基本知识

目标

  • 在博客或网页中让嵌入代码高亮显示.
  • 在Wordpress中自动忽略HTML和PHP代码.

  方法主要有两类,一种是引入第三方的java script和高亮语法插件,让pre和code标签中的代码高亮显示,另一种方法是直接嵌入主流网站的语法代码。

 


  

第一类方法:嵌入

 

  嵌入方式是最方便快捷的,很多网站都提供了代码导出的功能,它可以自动引入专业网站的高亮代码显示方式,美观大方。

 

GitHub gist 

使用方法:

<!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>

 

实现效果:

 

Codepen pen

使用方法:

<!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>

   

实现效果:

 

 


 

 

第二类方法:java script高亮插件

 

  通过引入代码高亮显示插件,同样可以实现博客以及其他网站嵌入代码的高亮显示,以下是几种主流的方法。我只展示了基本的使用方法,想详细了解使用方法和接口,可以点击链接到官网。

 

Highlight.js  

使用方法:

<!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>
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇checkbox框变大变小 下一篇CORS跨域资源共享你该知道的事儿

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目