第一次接触prism.js，并把它用到了园子里。

装逼如风，常伴吾身。有了如此利器，从此院子里我的代码是“最”漂亮的！

身为程序员深刻体会代码高亮在生产过程中是多么的重要。以下便是讲解如何在页面上显示代码高亮。

准备

官方下载地址：http://prismjs.com/

没错！官网很直观，没有那些花里花哨的东西，直接点击下载，进入到下载页面。

接下来这张图比较长，大家可以直接跳过着看。

  1. 核心代码（必选）
  2. 主题（我选择的是“贵族黑”，别问我为什么这么叫，任性）
  3. 语法包（是不是很多，随便选，随便挑，反正不要钱）
  4. 插件（我用了行数显示，其他的没试过，园友自行挖掘）

选择完之后，点击两个下载按钮，便会下载对应的Js和Css，而且都是一个，是不是很方便!!!

因为在页面上显示，我们需要显示的那坨东西浏览器只会认为是字符串。有了以上Js，他就会去识别相关的关键字，然后为其打上对应的标签以及样式。而Css毋庸置疑，就是用来设置颜色的。当然可以自行更改，我的就是按照vs2015默认状态的样式更改的。

配置

首先引用Js和Css

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

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

添加标签

<pre class="line-numbers">

    <code class="language-markup">

    </code>

</pre>

line-numbers便是显示行号，language-markup就是语言。

请开始你的表演

html版

<!DOCTYPE html>

<html>

    <head>

        <script>

        // 输出标题：

        document.getElementById("myH1").innerHTML="Welcome to my Homepage";

        // 输出段落：

        document.getElementById("myP").innerHTML="This is my first paragraph.";

        </script>

    </head>

    <body>

        <h1 id="myH1"></h1>

        <p id="myP"></p>

        <p><b>注释：</b>注释不会被执行。</p>

    </body>

</html>

C#版

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Newtonsoft.Json;

using System.Xml.Serialization;

using System.IO;

using System.Xml;

namespace GxHelper

{

    /// <summary>

    /// 转换工具

    /// v_0.0.3

    /// </summary>

    public static class ConversionHelper

    {

        #region 域

        #endregion

        #region 公共方法

        /// <summary>

        /// 对象转成Json字符串

        /// </summary>

        /// <param name="obj">对象</param>

        /// <returns></returns>

        public static string ToJson(this object obj)

        {

            return JsonConvert.SerializeObject(obj);

        }

        /// <summary>

        /// Json字符串转成对象

        /// </summary>

        /// <typeparam name="T">待转类型</typeparam>

        /// <param name="json">Json字符串</param>

        /// <returns></returns>

        public static T JsonToObj<T>(string json)

        {

            return JsonConvert.DeserializeObject<T>(json);

        }

        /// <summary>

        /// 对象转成XML字符串

        /// </summary>

        /// <param name="obj">对象</param>

        /// <returns></returns>

        public static string ToXml(this object obj)

        {

            //空值直接返回

            if (obj == null)

            {

                return string.Empty;

            }

            XmlSerializerNamespaces ns = new XmlSerializerNamespaces();

            ns.Add("", "");

            XmlSerializer serializer = new XmlSerializer(obj.GetType());

            using (StringWriter sw = new StringWriter())

            {

                serializer.Serialize(sw, obj, ns);

                return sw.ToString();

            }

        }

        /// <summary>

        /// XML字符串转成对象

        /// </summary>

        /// <typeparam name="T">待转类型</typeparam>

        /// <param name="xml">Xml字符串</param>

        /// <returns></returns>

        public static T XmlToObj<T>(string xml)

        {

            using (StringReader sr = new StringReader(xml))

            {

                XmlSerializer xs = new XmlSerializer(typeof(T));

                return (T)xs.Deserialize(sr);

            }

        }

        #endregion

        #region 私有方法

        #endregion

    }

}

结语

第三方的确实漂亮，但是写博客时运用起来甚是麻烦。

因为用Windows Live Writer写的文章，而且也用了园子里提供的代码插件，导致插入的代码没有打上对应的标签，需要自己去源代码里进行修改（此处应有喷子：修改下代码插件就行）。

但是能力有限，学长只能送到这了。

prism.js使页面代码变得漂亮的更多相关文章

  1. JS刷新页面总和！多种JS刷新页面代码!

    1)<meta http-equiv="refresh"content="10;url=跳转的页面">10表示间隔10秒刷新一次2)<scri ...

  2. js让页面逐渐变透明,直到消失

    在gitHub闲逛的时候,无意间发现了些好玩的代码,一个歪果仁写的,这里我做了些修改和优化,gitHub链接已经忘了,是一段恶搞的js代码,假如你的顾客或者老板拖欠你工资,那你就可以让项目页面在浏览器 ...

  3. 【highlight.js】页面代码高亮插件

    [highlight.js] 很多博客都支持页面插入各种语言的代码,而这些代码肯定是有高亮设置的.那么在我们自己的页面上如何进行代码高亮设置?有现成的这个highlight.js插件我们可以使用. h ...

  4. js刷新页面代码

    第一种: location.reload() 第二种: location.replace(location.href) 第三种: history.go() 第四种: location=location ...

  5. aos.js让页面滚动变得丰富

    (转)<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script ...

  6. js使页面重定向

    location.assign("http://www.baidu.com"); window.location="http://www.baidu.com"; ...

  7. wordpress优化之结合prism.js为编辑器自定义按钮转化代码

    原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...

  8. prism.js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

  9. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

随机推荐

  1. Oracle数据库01

    常用函数 COUNT(*):统计所有的数据量,没有过滤功能 COUNT(字段):统计出指定字段不为null的数据量,有过滤功能 COUNT(DISTINCT 字段):统计指定字段不为空并且去掉重复数据 ...

  2. Linux基础实验（二）

    一)基础实验: 1. 新建文件a.txt,并用权限模式.权限值两种方式修改权限为rwxrwx--x     新建文件:touch a.txt    权限模式:chmod ug=rwx o=x a.tx ...

  3. 【OCP-12c】CUUG 071题库考试原题及答案解析（23）

    23.choose the best answer View the Exhibits and examine PRODUCTS and SALES tables. You issue the fol ...

  4. kali linux之无线渗透（续）

    Airolib 设计用于存储ESSID和密码列表,计算生成不变的PMK(计算资源消耗型) PMK在破解阶段被用于计算PTK(速度快,计算资源要求少) 通过完整性摘要值破解密码SQLite3数据库存储数 ...

  5. JAVA判断质数

    好久没写了,今天做题有点忘了,不会写了.重新做了一份,整理出来. import java.util.Scanner; public class 判断质数 { public static boolean ...

  6. by python3-XSStrike 测试XSS

    一.概述: XSStrike是一个Cross Site Scripting检测套件,配备四个手写解析器,一个智能有效载荷生成器,一个强大的模糊引擎和一个非常快速的爬虫. XSStrike不是像其他工具 ...

  7. Struts2的优点与Struts1的区别:

    单实例与多实例有状态就是有数据存储功能,比如购物车,买一件东西放进去,可以再次购买或者删减.无状态就是一次操作,不能保存数据. 有状态对象,就是有成员属性的对象,可以保存数据,是非线程安全的.无状态对 ...

  8. 【UI组件】——用jQuery做一个上拉刷新

    技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...

  9. 为服务器设置固定IP地址

    为服务器设置固定IP地址 1.获取超级管理员权限 命令:$ su - 输入root密码 2.判断哪个网卡有流量,或者确定需要设置哪个网卡的固定ip 命令:# ifconfig PS:可以查询哪些网卡有 ...

  10. TSL协议升级导致的问题：caught when processing request: Received fatal alert: protocol_version

    近日,公司升级TSL协议,禁用TSL1.0,导致原本好好的https接口,报以下错误: 2019-03-05 15:43:29 [org.apache.commons.httpclient.HttpM ...