October 2018  |  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

行番号のついたソースコードを表示する方法(02)



 
設置・設定方法

 
html(※1)の<head>内に、以下の4つを記述します。
・コアスクリプト(shCore.js)を読み込む記述
・表示したい言語に応じたスクリプト(sh●●●.js等)を読み込む記述
・表示に使いたい配色(テーマ)のCSS(shCore■■■.css等)を読み込む記述
・スクリプトを開始する記述


(※1)JUGEMブログに設置の場合は、メニューバーの「デザイン」⇒「HTML・CSS編集」にて設置。


 
<!--syntaxhighlighter用 2015.10.29 ST-->
<script type="text/javascript" src="http://▲▲▲.com/●●●/scripts/shCore.js"></script><!-- 必須 -->
<script type="text/javascript" src="http://▲▲▲.com/●●●/scripts/shBrushXml.js"></script><!-- HTML,XML言語を表示したいとき -->
<script type="text/javascript" src="http://▲▲▲.com/●●●/scripts/shBrushJScript.js"></script><!-- JavaScript言語を表示したいとき -->
<script type="text/javascript" src="http://▲▲▲.com/●●●/scripts/shBrushCss.js"></script><!-- CSSを表示したいとき -->
<script type="text/javascript" src="http://▲▲▲.com/●●●/scripts/shBrushPhp.js"></script><!-- PHPを表示したいとき -->
<link type="text/css" rel="stylesheet"http://▲▲▲.com/●●●/styles/shCoreDefault.css"><!-- 例えば…デフォルトの配色 -->
<script type="text/javascript">SyntaxHighlighter.all();</script><!-- 必須 -->
<!--syntaxhighlighter用 2015.10.29 ED-->

※記事の途中だが、テストしてみた。設定がまずいのか?(^^;;ちょっと思ったとおりにいかないところを書き出しておく。
・デフォルトの配色+
<pre class=”brush: html;”>〜表示したいhtmlソースを記述〜</pre>にしても、コードが色分けされなかった。
・強調や色は、HTMLで記述した後にリッチテキストで手動で直したが反映しない。
・HTTPの部分がリンクになる ※PRE指定した時はリンクにならなくてもいいんだけど、、、

 
<<back |< 1 2

comments

   
pagetop