まあ、よくあるアレですわ！
ブログ上でソースコードを表示する際に、綺麗に行番号や色分けされて表示される、Syntax highlighting（シンタックスハイライト）とういものです。
WPなどでは利用されている方、かなり多いですね。WPに限ったことではないのですが、当方、Bloggerなので、今回導入方法を人柱的にお伝えしたいと思います。（大げさ…）
Syntax highlightingですが、実は色々御座います。
今回は「SyntaxHighlighter 」を使ってみますね。
特に、これを選択したことに意味は御座いません。
何となく、見た目が良さそう的な感じです。
ということで、まず実現するためにステップとしては2つあります。
1つ目は1<head>～</head>内に以下のソースを組み込んでください。
↓ これね…。。。
この時点でソースが綺麗に整っていることが確認できると思います。
要は、こういった表示を今回目指します！
※1
OKでしょうか？ 上記ソースを あなたのブログの<head>～</head>内に設置できたでしょうか？
これができたら最後のステップです。（はやっ！ｗ）
ソースコードを書くときの方法です。
つまりは、これを導入したからと言って、勝手にそういった表示にはなりません。そういう表示にするために、ある書き方を行って、初めてそういった表示になると言う事で御座います！
具体的には、以下の通りです。
<script type='syntaxhighlighter' class='brush: *****'><![CDATA[
コードの内容(エスケープ不要)
]]></script>
コードの内容(エスケープ不要)
]]></script>
または、
<pre class='brush: *****'>
コードの内容(エスケープ済)
</pre>
コードの内容(エスケープ済)
</pre>
***** の部分には表示する言語を記載します。
例えば、普通にHTMLのソースであれば、
<pre class='brush: html'>
コードの内容(エスケープ済)
</pre>
コードの内容(エスケープ済)
</pre>
といった感じですし、PHPの場合
<pre class='brush: php'>
コードの内容(エスケープ済)
</pre>
コードの内容(エスケープ済)
</pre>
と記述してください。
※わかると思いますが、「コードの内容」の箇所には実際のソースコードを挿入してね！
色々解説サイトがありますが、いまいち分かりつらい感じなので、とりあえず手っ取り早く実現されたい方は、2つのステップを思い出してください。
ステップ１：head内に、上記のコードを挿入。※1
ステップ2：コードを記載する際の書き方。
ステップ2：コードを記載する際の書き方。
この2つだけでとりあえず実現できます。
途中にあるエスケープについては、解説サイトが沢山ありますので調べてみてください。
↑このような感じで、綺麗に表示することができるようになります。
実際には、こう書いています。
<script type='syntaxhighlighter' class='brush: html'><![CDATA[
<p>こんにちは！</p>
]]></script>
<p>こんにちは！</p>
]]></script>
ちょっと、中途半端な内容となりましたが、実現するためには簡単な内容ではないかと思っております！必要な方は、是非一度お試しください。
2つのステップですよ。お忘れなく！^^
あぁ、あと１つ。
これらのコードを書く際は、ブログのソースコードで書いてくださいね！
 | 入門 HTML5 翻訳：矢倉 眞隆（監訳） , 他 参考価格：¥2,415 価格：¥2,415 OFF : () |
0 件のコメント:
コメントを投稿