prism.js使頁面代碼變得漂亮


第一次接觸prism.js,並把它用到了園子里。

裝逼如風,常伴吾身。有了如此利器,從此院子里我的代碼是“最”漂亮的!

身為程序員深刻體會代碼高亮在生產過程中是多么的重要。以下便是講解如何在頁面上顯示代碼高亮。

准備

官方下載地址:http://prismjs.com/

沒錯!官網很直觀,沒有那些花里花哨的東西,直接點擊下載,進入到下載頁面。

image

接下來這張圖比較長,大家可以直接跳過着看。

  1. 核心代碼(必選)
  2. 主題(我選擇的是“貴族黑”,別問我為什么這么叫,任性)
  3. 語法包(是不是很多,隨便選,隨便挑,反正不要錢)
  4. 插件(我用了行數顯示,其他的沒試過,園友自行挖掘)

image

選擇完之后,點擊兩個下載按鈕,便會下載對應的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寫的文章,而且也用了園子里提供的代碼插件,導致插入的代碼沒有打上對應的標簽,需要自己去源代碼里進行修改(此處應有噴子:修改下代碼插件就行)。

但是能力有限,學長只能送到這了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM