使用Prism.js在Blogger插入程式碼

HTML

<pre data-language="html" data-prismjs-copy-error="複製失敗" data-prismjs-copy-success="複製成功" data-prismjs-copy="複製">
    <code class="language-html line-numbers">
      <h1>Test</h1>
      	<p>Example</p>
    </code>
</pre>

html

效果

<h1>Test</h1>
	<p>Example</p>

html

其他語言

<pre data-language="python" data-prismjs-copy-error="複製失敗" data-prismjs-copy-success="複製成功" data-prismjs-copy="複製">    <code class="language-python line-numbers">
    from django.http import HttpResponse
    from django.shortcuts import render
    from .models import UserInfo, StuInfo

    # Create your views here.
    def home(request):
        return render(request, "home.html")
    </code>
</pre>

html

效果

from django.http import HttpResponse
from django.shortcuts import render
from .models import UserInfo, StuInfo

# Create your views here.
def home(request):
    return render(request, "home.html")

python

命令提示字元

<pre class="command-line" data-prompt="PS C:\Users\Admin>" data-output="2-19">
	<code class="language-bash">
    	dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos
    </code>
</pre>

html

效果

dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos

Bash

安裝教學

在 Blogger 中使用 Prism.js 讓程式碼高亮 (ruyut.com)

Prism.js 推薦套件和使用方式教學 (ruyut.com)