ワサコレ戦記の備忘録-pone

pone_web ワサコレ・スマホ・タブレット・パソコン・クルマ

TOP >> スポンサー広告 >> 【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-TOP >> Web site >> 【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
※古い記事を試すときは自己責任で!

この記事にリンクを貼る


Trackback: -- |  Comment: --

【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-

【FC2 BLOG♘用】
SyntaxHighlighterの実際の使い方について記載します。

まだ導入されてない方は関連記事をお読みください。

関連記事:
【FC2】SyntaxHighlighter 3.0.83 導入編 -1-
【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-
・【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-



まずは注意点を確認しましょう。

注意点
<pre>~</pre>の中ではHTML特殊文字を変換する必要があります。
文字"&'<>
キーワード表記&quot;&amp;×&lt;&gt;
10進表記&#34;&#38;&#39;&#60;&#62;


codeまたはタグを書きます。これはホームページ作成ソフトなんかでも構いません。
それを変換します。私はHTMLタグ変換ツールを使わしてもらっています。

出来上がったcodeをブログ上に貼り付けて<pre class="brush: 使用する言語;">~</pre>で囲みます。
これだけで完成です。
使用する言語は以下のjsファイルと関連付けられています。
Brush name
ソース種別
Brush aliases
設定できるコード
File name
JSファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

例えば

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


を表示したい場合はHTMLタグ変換ツールを使ってこのようにします。

&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;strong&gt;SyntaxHighlighter&lt;/strong&gt;&lt;/span&gt;



そしてhtmlの場合であればBrush aliasesをhtmlにします。

<pre class="brush: html;">&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;strong&gt;SyntaxHighlighter&lt;/strong&gt;&lt;/span&gt;</pre>

となります。

実際に表示すると
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
このように表示してくれます。
ソースを選択したい場合は、内部でダブルクリックすると全選択してくれるのでそのままコピーするだけです。

では、表示のオプション説明です。

.行番号非表示(gutter: false)
<pre class="brush: html; gutter: false">~</pre>
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>



.強調表示(highlight: [*,*,*])
<pre class="brush: html; highlight: [1,3,4]">~</pre>
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFF00"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFFFF"><strong>SyntaxHighlighter</strong></span>
<span style="color:#000000"><strong>SyntaxHighlighter</strong></span>



.タイトル設定(title= "***") "の位置注意
<pre class="brush: html;" title= "ABC">~</pre>
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFF00"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFFFF"><strong>SyntaxHighlighter</strong></span>
<span style="color:#000000"><strong>SyntaxHighlighter</strong></span>



.開始行番号を指定(first-line:*)
<pre class="brush: html; first-line:10">~</pre>
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFF00"><strong>SyntaxHighlighter</strong></span>
<span style="color:#FFFFFF"><strong>SyntaxHighlighter</strong></span>
<span style="color:#000000"><strong>SyntaxHighlighter</strong></span>



オプションを複数使った設定もできます。
他にもオプションはあるみたいなので興味がある方はいろいろと探してみたり試してみてはどうでしょうか? ※古い記事を試すときは自己責任で!
Web siteの関連記事

この記事にリンクを貼る


TOP > スポンサー広告 > 【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-TOP > Web site > 【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-

この記事に対するコメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://recoboo.blog28.fc2.com/tb.php/91-1b2d4606
この記事にトラックバックする(FC2ブログユーザー)

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。