トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 22 2012

  • SyntaxHighlighter 3.0.83 使い方

  • 掲載カテゴリ : ノウハウ集
ブログにコードを張り付ける方法です。

<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>

を張り付ける場合は、

&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;b&gt;SyntaxHighlighter&lt;/b&gt;&lt;/span&gt;
のようにHTML特殊文字を変換して記載します。

HTML特殊文字変換はHTMLタグ変換ツールを使って変換します。
HTML内のタグ(［ < ］ ［ > ］ )や ［ & ］ [ " ]などを記号のままページに表記したい場合、［ &lt; ］ ［ &gt; ］ ［ &amp; ］といった文字実体参照へ変換する必要があります。これは、その変換ツールです。

変換した内容の前後を
<pre class="brush: html;">&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;b&gt;SyntaxHighlighter&lt;/b&gt;&lt;/span&gt;</pre>
のように<pre>タグで囲います。基本的な使い方はこのように<pre>タグで囲うことです。

実際の表示は、
<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>


その他よく使うオプションとしては1～3のようなものがあります。
1. 強調表示(highlight: [*,*,*])
<pre class="brush: html; highlight: [1,3,4]">～</pre>
<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>
<span style="color:#00FF00"><b>SyntaxHighlighter</b></span>
<span style="color:#0000FF"><b>SyntaxHighlighter</b></span>
<span style="color:#FFFFFF"><b>SyntaxHighlighter</b></span>


2. タイトル設定(title= "***") "の位置注意
<pre class="brush: html;" title= "ABCDEF">～</pre>
<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>


3. 開始行番号を指定(first-line:*)
<pre class="brush: html; first-line:10">～</pre>
<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>
<span style="color:#00FF00"><b>SyntaxHighlighter</b></span>
<span style="color:#0000FF"><b>SyntaxHighlighter</b></span>


コメント

今日は～＾＾またブログ覗かせていただきました。よろしくお願いします。

コメントの投稿

   管理者にだけ表示を許可する