显示代码片段 / Display Code Snippet In Blogger

很多时候我们可以在网络教学里可以看到作者都会有显示代码片段， 比如以下：

这也是我很久之前就好奇如何办到的，所以我今天就来研究如何显示代码片段。

方式：

1. 截图 Screenshot
• 这方式很简单，快速，可惜不太方便读者因为不能 highlight code
• Example of Code Snippet: 
  
  
  
2. Edit HTML & CSS
• 自己加 CSS style sheet 和加 Html tag
• 好处：可以自己 customize 设计，颜色等
• 坏处：费时，不是一个很好的方法
• 所以以下是我下午自己做的成品例子：

    #include<SPI.h>
    #include<Ethernet.h>
    // the media access control (ethernet hardware) address for the shield:
    byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
    //the IP address for the shield:
    byte ip[] = { 192, 168, 66, 100 };
    EthernetServer server = EthernetServer(111);
    void setup()
    {
    	Ethernet.begin(mac, ip);
    }
	
    void loop()
    {
    	// if an incoming client connects, there will be bytes available to read:
        EthernetClient client = server.available();
        if (client == true)
        {
            // read bytes from the incoming client and write them back
            // to any clients connected to the server:
            server.write(client.read()); 
        }
    }

• 代码如下： (Line 1-26) 是 HTML & (Line 27 -33) 是 CSS。以下代码看起来非常复杂，因为你需要一个个 Handle 那些 tag 和 associate 跟他的 respective class-name. 非常无敌耗时间。

  	<div class="codediv">
    <pre padding="4px">
    <span class="tag">#include</span><span class = "textValue" >&lt;SPI.h&gt;</span>
    <span class="tag">#include</span><span class = "textValue" >&lt;Ethernet.h&gt;</span>
    <span class="textComment">// the media access control (ethernet hardware) address for the shield:</span>
    <span class="tag">byte</span> mac[] = { <span class = "textValue" >0xDE</span>, <span class = "textValue" >0xAD</span>, <span class = "textValue" >0xBE</span>, <span class = "textValue" >0xEF</span>, <span class = "textValue" >0xFE</span>, <span class = "textValue" >0xED</span> };
    <span class="textComment">//the IP address for the shield:</span>
    <span class="tag">byte</span> ip[] = { <span class = "textValue" >192</span>, <span class = "textValue" >168</span>, <span class = "textValue" >66</span>, <span class = "textValue" >100</span> };
    <span class="tag">EthernetServer</span> server = <span class = "textFunction" >EthernetServer(</span><span class = "textValue" >111</span><span class = "textFunction" >)</span>; <span class="tag">void</span> <span class="textFunction">setup()</span>
    {
        <span class="textFunction">Ethernet</span>.<span class="textFunction">begin(<span class = "textValue" >mac</span>, <span class = "textValue" >ip</span>)</span>;
    }
    
    <span class="tag">void</span> <span class="textFunction">loop()</span>
    {
    	<span class="textComment">// if an incoming client connects, there will be bytes available to read:</span>
        <span class="textFunction">EthernetClient</span> client = server.<span class = "textFunction" >available()</span>;
        <span class="tag">if</span> (client == <span class = "textValue" >true</span>)
        {
        	<span class="textComment">// read bytes from the incoming client and write them back</span>
            <span class="textComment">// to any clients connected to the server:</span>
            server.<span class = "textFunction" >write(</span>client.<span class = "textFunction" >read()</span>);    
        }
    }
  	</pre>
    </div>
  
  <style>
  .codediv { background-color: #d9ead3; font-family: "roboto mono"; }
  .tag { color: #F32DE1; font-weight: bold; }
  .textValue { color: #6C63F3; }
  .textFunction { color: #024AC1; }
  .textComment { color: #95C608; font-weight: italic; }
  </style>
 

3. Prism.js Library
• 它是一个JS(JavaScript) 非常 lightweight & extensible syntax highlighter。
• 拥有7个Theme, 还有Support 超过300种 Language 的 syntax highlighter
• 此外还有support 不同的 Features 比如， highlight line number, keyword 等等
• 既然这样好用，我们要如何Include 进我们的Blogger呢？其实有很多种方法，但是今天我会略略介绍两个方法，方法：
1. CDN (Content Delivery Network) of Prism.js
• 简单来说就是一个 group of servers spread out over many locations。非常广泛被使用来 deliver Stylesheet 和 Javascript
• 这个方法看起来是比较容易但是也是有 tricky 的地方，比如我的情况。我要显示的 code 是 Arduino 的 code。但是我只 include arduino 的 CDN 是不足够的。 因为， Arduino depend on C++ ， C++ depend on C, C depend on C-like. 所以我需要include Arduino, C++, C 和 C-like 的 CDN 才能行哦
• 这网址可以让你选择你想要的语言，再看看它的 sample output 和它depend on 什么哦
• 接下去我会放一些截图教学，demo 如何 include 进我们的 blogger:
  
  选 Layout, 按 Add New Widget
  
  按 Add HTML/JavaScript Widget
  
  把 CDN 复制进 Content, 然后 Save
  
  把那个 Widget Drag 去你喜欢的地方，我的 case，我是把它放在 footer
  
• 以下是我include在 Widget 里的 JavaScript tag:

          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.js" integrity="sha512-1CSA3rpmD62h797RZWfvbNE9Tb36XU1+0Ktk8BOl4G76UbqmdeSJYF++F0mUN2VKW6mqTYcoLCBXMTUp7W/Z5w==" crossorigin="anonymous"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.css" integrity="sha512-PRPGfHKa2eGLwuAFVtaIaC1cOJDqw0zPfr5wWq06Nkt0w/KK6IPMNFwUOj/t6zq3D1vVAskdg18R93pLsxzErA==" crossorigin="anonymous" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-clike.js" integrity="sha512-/dLJdDfdw/dWUzjir0LIbv3Vfn+arbEhx3yi3huz14zwDfys1Pf/w8cRhPv1kpp8jDyuRS+DgqPkyolBQPMUoA==" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-c.js" integrity="sha512-lh9etNBW/MYJNMvffHoL7nILYOGEolYFU0hTRxawLM/wYenErw27LSSaPBl+ktpEnW0DTdFgnjr6XfzYyremMQ==" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-cpp.js" integrity="sha512-giwQJw3LG8SCNVUKj6EsbTlMuL1FOEJNKB3wwsgoFCCNoE9D+krJzhLl//E2VM+5RlpoeGH21oHO6mH21CSkpg==" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-arduino.js" integrity="sha512-F+n/ymvp6zQPwQz+FhZVXIIL1+rHHQsZkcMtfUtOGlfUcB2RMJ3FN0xH7rs+j+2giieQ7aaKHKeLIue3zQxfjg==" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.css" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/highlight-keywords/prism-highlight-keywords.js" integrity="sha512-0OZdlAZ9h/VRVILzVVIOH1ihzRgXjT5WIS0reVondGt7ZovuiOynWzRa25zNfgzGn1/nsNvg4lujtdKrdG48aQ==" crossorigin="anonymous"></script>
          
          

• 成品：可以去我 Espressif ESP32 TCP/IP 的 Post 看看
• 代码如下：

            
            <pre class="line-numbers language-arduino"> <code>
            #include &lt;SPI.h&gt;
            #include &lt;Ethernet.h&gt;
            // the media access control (ethernet hardware) address for the shield:
            byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //the IP address for the shield:
            byte ip[] = { 192,168,66,100 }; EthernetServer server = EthernetServer(111);
            void setup()
            {
            	Ethernet.begin(mac, ip);
            }
            
            void loop ()
            {
            	// if an incoming client connects, there will be bytes available to read:
              EthernetClient client = server.available();
              if (client == true)
              {
              	// read bytes from the incoming client and write them back
                  // to any clients connected to the server: server.write(client.read());
              }
            }</code>
            </pre>
            
            

• 除了加新的 Widget的方法，还有另外可以把 CDN Javascript 加在 <head> tag 的方法：
  
  按 Theme, 按 More
  
  
  Choose Edit HTML
  
  <head> tag 里加入上面所说的 CDN。
  
  
2. Download
• 这个方法就，去Prism.js 网站按下Download
• Checked 你想要的language
• 然后把那个 style 放进 drive / dropbox
• 打开 sharelink
• 然后 add tag link 去你的 shared link
• 可以参考这 Youtuber 的影片
4. GitHub Gist
• 如果你有GitHub account 也只是想要普通的显示code snippet 不需要很漂亮的UI, GitHub Gist 有一个非常容易操作的方法。
• 首先，浏览 GitHub Gist 然后登入后，你就可以复制你想要的代码，然后给那代码一个名字加上 extenstion (这样GitHub 才会懂是什么语言的代码）
• 然后按下Create Secret Gist, 然后复杂角落的 Embeded code, 放进 Blogger as Script tag 就完成了。
• 方法:
  
  
  
  
  
• 成品如下：
  

  	#include <SPI.h>
  	#include <Ethernet.h>
  	// the media access control (ethernet hardware) address for the shield:
  	byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
  	//the IP address for the shield:
  	byte ip[] = { 192,168,66,100 };
  	EthernetServer server = EthernetServer(111);
  	void setup()
  	{
  	Ethernet.begin(mac, ip);
  	}
  	void loop () {
  	// if an incoming client connects, there will be bytes available to read:
  	EthernetClient client = server.available();
  	if (client == true) {
  	// read bytes from the incoming client and write them back
  	// to any clients connected to the server:
  	server.write(client.read());
  	}
  	}

  view raw TCPIP_Arduino.ino hosted with ❤ by GitHub
• 代码如下：
  

   <script src="https://gist.github.com/leannetan97/5bb6538e442e0b40ab42abe6934e0245.js"></script>

**注：要放入 <head>tag 里的代码需要先经过 Encode (HTML Character Encoder 在这里) ， 因为很多符号有自己的写法，比如 "<" 在 HTML 里是 "&lt;"