Home
Programming-網頁語法-Blogger

[Blogger] 程式碼語法高亮外掛

[Blogger] 程式碼語法高亮外掛

3月 07, 2016

作者：月

官方網站

☞ SyntaxHighlighter

blogger範本 <head> 引用

<!-- (1) INCLUDE SyntaxHighlighter Components (css and javascript) -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- END INCLUDE SyntaxHighlighter Components -->

<!-- (2) INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- END INCLUDE BRUSHES -->

<!-- (3) INIT SyntaxHighlighter -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>
<!-- END INIT SyntaxHighlighter -->

根據以下分類，選擇適合您的JS檔，放至 <head>

程式語言	引用class name	引用js file
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js
CSS	css	shBrushCss.js
JavaScript	js, jscript, javascript	shBrushJScript.js
PHP	php	shBrushPhp.js
Visual Basic	vb, vbnet	shBrushVb.js

<body> 加入

<pre class="brush:引用class name">
  要張貼的程式碼
</pre>

Source

☞ How To Integrate SyntaxHighlighter To Blogger, Blogspot
☞ [影片檔] How to integrate SyntaxHighlighter to Blogger, Blogspot
☞ spicywolfs space | 利用Syntaxhighlighter在blog文章中快速呈現帶有顏色標記與行

沒有留言:

訂閱：張貼留言 ( Atom )