第一次接觸prism.js,並把它用到了園子里。
裝逼如風,常伴吾身。有了如此利器,從此院子里我的代碼是“最”漂亮的!
身為程序員深刻體會代碼高亮在生產過程中是多么的重要。以下便是講解如何在頁面上顯示代碼高亮。
准備
官方下載地址:http://prismjs.com/
沒錯!官網很直觀,沒有那些花里花哨的東西,直接點擊下載,進入到下載頁面。
接下來這張圖比較長,大家可以直接跳過着看。
- 核心代碼(必選)
- 主題(我選擇的是“貴族黑”,別問我為什么這么叫,任性)
- 語法包(是不是很多,隨便選,隨便挑,反正不要錢)
- 插件(我用了行數顯示,其他的沒試過,園友自行挖掘)
選擇完之后,點擊兩個下載按鈕,便會下載對應的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寫的文章,而且也用了園子里提供的代碼插件,導致插入的代碼沒有打上對應的標簽,需要自己去源代碼里進行修改(此處應有噴子:修改下代碼插件就行)。
但是能力有限,學長只能送到這了。