粗茶でございます日本語 プログラミング 言語 「なでしこ」 大好き 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://nadesocha.blog.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | ホーム | ↑ ページ先頭へ ↑ |

SyntaxHighlighterを使ってみた

   ↑  2012/05/03 (木)  カテゴリー: プログラミング全般
 fc2ブログで、VBとかC#とかのプログラム ソースを綺麗に表示したくて、いろいろと調べていたら、SyntaxHighlighterというものが良さそうなので、導入してみました。

 使用したのは、バージョン3.0.83です。
 以下、設定メモ。

1.SyntaxHighlighter3.0.83をダウンロード
 こちらのサイトにアクセス。SyntaxHighlighter3.0.83
 ページの本文にある、「Click here to download.」をクリックして、「syntaxhighlighter_3.0.83.zip」をダウンロードします。
 ダウンロードしたzipファイルを展開すると、中に以下のファイルがあります。
 ・compass(フォルダ)
 ・scripts(フォルダ)
 ・src(フォルダ)
 ・styles(フォルダ)
 ・tests(フォルダ)
 ・index.html
 ・LGPL-LICENSE
 ・MIT-LICENSE

2.ファイルをアップロード
 fc2ブログの管理画面のファイルアップロードを開き、必要なファイルをアップロードします。
 【必須ファイル】
  (styles)フォルダ内
  ・shCore.css
  ・shCoreDefault.css
  (scripts)フォルダ内
  ・shAutoloader.js
  ・shBrushXml.js
  ・shCore.js
  ・shLegacy.js
 【任意ファイル】表示したい言語を選択
  (scripts)フォルダ内
  ・shBrushCSharp.js
  ・shBrushDelphi.js
  ・shBrushPlain.js
  ・shBrushVb.js
 私は、C#、Delphi、テキスト、VB用のファイルを選択しました。
 ファイルをアップロードしたら、そのファイルのリンク先を調べておきます。
 たとえば、ファイルアップロード画面で、アップロードしたファイル名の左にある「表示」というリンクを右クリックして、ショートカットのコピーをすれば、リンク先がわかります。
 リンク先は「http://~ユーザー名/ファイル名」となっているはずです。このファイル名を除いた部分「http://~ユーザー名」を後で使います。

3.テンプレートを書き換える
 fc2ブログの管理画面のテンプレートの設定を開き、HTML編集欄で、<head>と<body>を書き換えます。
 まず、</head>の直前に、下記のHTMLを挿入します。
<link type="text/css" rel="stylesheet" href="[リンク先]/shCore.css" />
<link type="text/css" rel="stylesheet" href="[リンク先]/shCoreDefault.css" />

 [リンク先]の部分は、先ほど調べたリンク先(ファイル名を除く)に置き換えて下さい。
 次に、</body>の直前に、下記のHTMLを挿入します。
<script type="text/javascript" src="[リンク先]/shCore.js" charset="euc-jp"></script>
<script type="text/javascript" src="[リンク先]/shAutoloader.js"></script>
<script type="text/javascript" src="[リンク先]/shLegacy.js"></script>
<script type="text/javascript" src="[リンク先]/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"csharp [リンク先]/shBrushCSharp.js",
"delphi [リンク先]/shBrushDelphi.js",
"text plain [リンク先]/shBrushPlain.js"
"vb [リンク先]/shBrushVb.js",
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>

 同じく、[リンク先]の部分は、先ほど調べたリンク先(ファイル名を除く)に置き換えて下さい。また、各言語ファイルの指定は、アップロードしたファイルごとに記述します。
 「更新」ボタンを押して、HTMLの編集を終了します。

 これで、SyntaxHighlighterの設置が完了しました。
 他の表示オプションの設定等は、他のブログを参考にしました。
 また、テンプレートによっては、うまく表示できないものがありました。おそらく、<pre>タグの表示に何か細工がしてあるのかもしれません。
 私が何度も失敗したところは、[リンク先]でした。アップロードしたファイルのリンク先なのに、間違えてブログのアドレスにしていたため、表示できなかったのです。

4.ブログにソースを表示する
 記事の中に、プログラム ソースを表示するには、タグで囲みます。
<pre class="brush: 言語名;">
ソースコード
</pre>

 言語名には、先ほどのHTMLに記入した「csharp」や「text」などを指定します。
 たとえば、VBのソース コードならば、次の通りです。
<pre class="brush: VB;">
Sub Test()
Dim ans as string
ans = &quot;mile&quot;
MsgBox &quot;S&quot; &amp; ans &amp; &quot;s!&quot;
End Sub
</pre>


Sub Test()
Dim ans as string
ans = "mile"
MsgBox "S" & ans & "s!"
End Sub


 ただし、特殊文字は面倒ですが変換しておく必要があります。
 特殊文字についても、他のブログを参考にして下さい。

 SyntaxHighlighterは、表示されたコードをダブルクリックするだけで、選択できるのでとても便利です。また、改行やインデントもきちんと表示してくれるので、とても見やすいです。
 なでしこのソースコードを表示するのにも役立ちます。
関連記事

FC2スレッドテーマ : プログラミング (ジャンル : コンピュータ

(記事編集) http://nadesocha.blog.fc2.com/blog-entry-146.html

2012/05/03 | Comment (0) | Trackback (1) | ホーム | ↑ ページ先頭へ ↑ |

Comment

コメント:を投稿する 記事: SyntaxHighlighterを使ってみた

お気軽にコメント:をぞうぞ。
非公開 (管理人のみ閲覧可能なコメント:) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメント:として投稿する。(管理人にのみ公開)

Trackback


この記事にトラックバック:する (FC2ブログユーザー限定)

まとめtyaiました【SyntaxHighlighterを使ってみた】

 fc2ブログで、VBとかC#とかのプログラム ソースを綺麗に表示したくて、いろいろと調べていたら、SyntaxHighlighterというものが良さそうなので、導入してみました。 使用したのは、バー

まとめwoネタ速neo 2012/05/12
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。