粗放的代码展示

有时候，网页中会插入代码。直接把代码放入<pre></pre>标签和<code></code>标签里，也算是可以在页面中显示出来。

比如下面这样的：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>直接写代码</title>

</head>

<body>

	<pre>

		<code>

			function add(a, b){

				return a + b;

			}

		</code>

	</pre>

</body>

</html>

那么效果如何呢？如下：

可以发现上面这样是一种很糟糕的效果。

对比React官网上的代码展示

对比一下react官网上的代码展示方式：

反正我是更喜欢像react官网这样来展示代码。

第一段代码经过一个神秘的处理之后：

这是怎么处理的呢？源码变成什么样了呢？

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>使用prism美化网页中的代码</title>

	<link rel="stylesheet" href="../libaray/prismjs/prism.css">

</head>

<body>

<pre class="line-numbers"><code class="language-javascript">function add(a, b){

	return a + b;

}</code>

</pre>

<script src="../libaray/prismjs/prism.js"></script>

</body>

</html>

可以看到新的网页代码中引入了两个文件：prism.css和prism.js

使用prism.js美化网页中的代码

Prism is a lightweight, extensible syntax highlighter.

Prism是一款轻量的，可扩展的语法高亮处理器。

react、MDN、SitePoint、css-tricks等网站都使用该项目

使用起来特别简单：

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8" />

		<title>Prism不同的使用方式</title>

		<!-- 引入prism.css文件 -->

		<link rel="stylesheet" href="./prism.css">

	</head>

	<body>

		<!-- 放置代码位置 -->

		<!-- css代码 -->

		<pre>

			<code class="language-css">

				body{

					background-color: red;

				}

			</code>

		</pre>

		<!-- JavaScript代码 -->

		<!-- 使用行号插件和高亮插件 -->

		<pre>

			<code class="language-javascript line-numbers">

				function Person(name, age){

					this.name = name || 'pelli';

					this.age = age || 18;

				}

				Person.prototype.sayHi = function(){

					console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old');

				};

			</code>

		</pre>

<!-- JavaScript代码 -->

<!-- 使用行号插件和高亮插件 -->

<pre>

<code class="language-javascript line-numbers">function Person(name, age){

	this.name = name || 'pelli';

	this.age = age || 18;

}

Person.prototype.sayHi = function(){

	console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old');

};</code>

</pre>

		<!-- 引入prism.js文件 -->

		<script src="./prism.js"></script>

	</body>

</html>

效果如下：

除了以上介绍的简单使用方式以外，还能够在node里面使用，输出处理好的dom字符串。相关内容，请看官网介绍。

相关链接

微信公众号:撩码

prism.js——让网页中的代码更好看的更多相关文章

  1. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. Ifvisible.js – 判断网页中的用户是闲置还是活动状态

    ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

  4. js实现网页中的"运行代码"功能

    <!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功 ...

  5. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

  6. 使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...

  7. java正则表达式移除网页中注释代码

    /** * 移除网页中注释掉的代码 * * @param str * @return */ public static String removedisablecode(String str) { P ...

  8. js 学习之路5：使用js在网页中添加水印

    示例: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="te ...

  9. 使用 highlight.js 在网页中高亮显示java 代码 【原】

    <html> <head> <meta charset="UTF-8"> <script src="http://apps.bd ...

随机推荐

  1. Java 常用API（一）

    目录 Java 常用API(一) 1. Scanner类 引用类型的一般使用步骤 Scanner的使用步骤 例题 2. 匿名对象 概述 匿名对象作为方法的参数 匿名对象作为方法的返回值 3. Rand ...

  2. 认识mysql3个基本库

    一.3个基本库 数据库初始化安装完毕会有三个基本库mysql .information_schema.performace_schema.作为应用程序开发者,平时较少关注这些数据库尤其是后两者.但是通 ...

  3. 白话马尔科夫链蒙特卡罗方法(MCMC)

    前言 你清茶园不是人待的地方! 里面的个个都是人才,说话又好听--就是我太菜了啥也听不懂,这次期中还考的贼**烂,太让人郁闷了. 最近课上讲这个马尔科夫链蒙特卡罗方法,我也学得一塌糊涂.这时我猛然想起 ...

  4. iOS中的几种锁的总结，三种开启多线程的方式（GCD、NSOperation、NSThread）

    学习内容 欢迎关注我的iOS学习总结--每天学一点iOS:https://github.com/practiceqian/one-day-one-iOS-summary OC中的几种锁 为什么要引入锁 ...

  5. java读取文件内容常见几种方式

    ①随机读取文件内容 ②以行为单位读取文件,常用于读面向行的格式化文件 ③以字符为单位读取文件,常用于读文本,数字等类型的文件 ④以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件 pa ...

  6. 减少 zabbix 频繁报警

    一直以来困扰的我问题是,触发器一旦触发,便会猛报警,如果你设置了email ,你的邮箱绝对会爆掉. 今天终于找到了方案,很简单,就是增加action 的steps ,从一个增加到default dur ...

  7. 不会看 Explain执行计划，劝你简历别写熟悉 SQL优化

    昨天中午在食堂,和部门的技术大牛们坐在一桌吃饭,作为一个卑微技术渣仔默默的吃着饭,听大佬们高谈阔论,研究各种高端技术,我TM也想说话可实在插不上嘴. 聊着聊着突然说到他上午面试了一个工作6年的程序员, ...

  8. 8086 8253 proteus仿真实验

    目录 实验内容 电路图 计数初值 关于8523的地址 关于灯的地址 代码内容 实验内容 电路图 计数初值 已知\(f_{clk0}=100khz\),所以\(T_{clk0}=\frac{1}{f_{ ...

  9. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

  10. Adaboost原理及相关推导

    提升思想 一个概念如果存在一个多项式的学习算法能够学习它,并且正确率很高,那么,这个概率是强可学习的.一个概念如果存在一个多项式的学习算法能够学习它,并且学习的正确率仅比随机猜测略好,那么,这个概念是 ...