使用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>
        
    

效果

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

其他語言

	
      
<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>
		
    

效果

    
    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")
    

命令提示字元

	
      
<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>
		
    

效果

	
    	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
    

安裝教學

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

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