2016年4月17日日曜日

BloggerにSyntaxHighlighterを導入する手順

今回はブログにソースコードを綺麗に表示する方法を一つ紹介します。ソースコードを綺麗に表示する方法はいろいろあると思いますが、SyntaxHighlighterを使う方法について説明します。 




1.テンプレートの編集

①.Bloggerの管理画面を開いて、テンプレートの「HTMLの編集」画面を開きます。

②.HTMLの編集画面にて、「</head>」を検索する。

③.「</head>」の上に、以下のを追加する。
④.追加後のイメージは以下になります。

2.投稿する際の記載方法

①.投稿する際に、直接「作成」タブに記載するのではなく、「HTML」タブ中に、以下の<pre>タグ中にソースコードを記載する。「alias」には対象ソースの言語を指定します。例えば、CSSはCSS、JavaScriptはjs、xmlはxml、Javaはjavaになります。
※ソースコードに「<」が入っている場合、「<」を「&lt;」に置換しないと行けません。
このHTMLエスケープツールを使えば、簡単にエスケープしてくれると思います。
 <pre class="brush: alias;">
// ココにソースを記述
</pre>

3.対応のソース言語のalias一覧

対応言語キーワード
複数あるものは、どれか1つをチョイス
ActionScript3as3, actionscript3
Bash/shellbash, shell
ColdFusioncf, coldfusion
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Erlangerl, erlang
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

0 件のコメント:

コメントを投稿