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

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

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

方式：

截图 Screenshot

这方式很简单，快速，可惜不太方便读者因为不能 highlight code
Example of Code Snippet:

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>

Prism.js Library

它是一个JS(JavaScript) 非常 lightweight & extensible syntax highlighter。
拥有7个Theme, 还有Support 超过300种 Language 的 syntax highlighter
此外还有support 不同的 Features 比如， highlight line number, keyword 等等
既然这样好用，我们要如何Include 进我们的Blogger呢？其实有很多种方法，但是今天我会略略介绍两个方法，方法：

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。

Download

这个方法就，去Prism.js 网站按下Download
Checked 你想要的language
然后把那个 style 放进 drive / dropbox
打开 sharelink
然后 add tag link 去你的 shared link
可以参考这 Youtuber 的影片

GitHub Gist

如果你有GitHub account 也只是想要普通的显示code snippet 不需要很漂亮的UI, GitHub Gist 有一个非常容易操作的方法。
首先，浏览 GitHub Gist 然后登入后，你就可以复制你想要的代码，然后给那代码一个名字加上 extenstion (这样GitHub 才会懂是什么语言的代码）
然后按下Create Secret Gist, 然后复杂角落的 Embeded code, 放进 Blogger as Script tag 就完成了。
方法:
成品如下：

代码如下：

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

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

Insurance Sharing 保单分享 #1

By 实嬿世界 Leanne's Realm February 13, 2021

Search This Blog

实嬿世界 Leanne's Realm

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

Comments

Post a Comment

Popular posts from this blog

Insurance Sharing 保单分享 #1

马大大学时期打卡的地方 / Check In Points During UM Life