July 2020  |  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
2015
10/29
Thu

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

JUGEMテーマ：ＷＥＢデザイン：ホームページ制作
 


 
設置・設定方法

 
��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