T.Takahashi bloggerでSyntaxHighlighterを使う方法 2017-06-23T03:56:23Z
０；ゼロからはじめる！

【最終更新日：2017/06/23】 SyntaxHighlighter ブログカスタマイズ

bloggerでSyntaxHighlighterを使う方法

スポンサーリンク

導入

まずは、head内にSyntaxHighlighterを導入するために下記を記述する。今回は、CSSとHTMLの導入を行う。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- SyntaxHighlighter導入 -->
<!-- SyntaxHighlighter本体の記述 -->
<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'/>
<!-- 選択する言語部分の記述 -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- bloggerで使用するための記述 -->
 <script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all()
</script>

記事内での記述方法

<pre class="brush:[Brush名]">
　CSSやHTML文
</pre>



※CSSやHTML文の特殊文字『<』、『>』はコード変換する必要がある。


参考サイト様その１参考サイト様その２

関連記事


0 件のコメント :

コメントを投稿