2017年06月 / 05月≪ 123456789101112131415161718192021222324252627282930≫07月

2008.07.03 (Thu)

[ブログ] dp.SyntaxHighlighter を利用してWebページ上のソースコードを飾る

ども、ご無沙汰してます。スィンです。

10時ぐらいに寝ようと布団に入ったのですが、咳が出だして寝付けず。
せっかくなので、以前から導入しようと思っていた、Webページのソースコードを飾るツールをこのブログに導入しました。

しかし、すでに解説されているサイトを参考にしながらもうまく表示できず手こずってしまったので、自分なりのやり方を書いておきます。 FC2ブログへの導入方法で説明しますので、他のブログやWebサーバーで導入する場合は適宜読み替えてください。

●ツールの選定とダウンロード
ツールは色々あったのですが、表示スタイルの良さから syntax highlighter に決めました。
syntaxhighlighter - Google Code
rar圧縮ファイルになっているので、ダウンロード後は対応している解凍ツールで解凍します。

●ファイルのアップロード
FC2ブログにログインして、「メニュー>ツール>ファイルアップロード」より、以下のファイルをアップロードします。Uncompressed のフォルダに入っているものは利用しません。アップロードしたファイルのPathは、すべて控えておいてください。

SyntaxHighlighter.css
shCore.js

この二つは必ず必要なものです。

Scriptフォルダの中身を眺めて、自分がブログでコードを書きそうな言語に対応した js ファイルをアップロードしておきます。

自分の場合は、C言語、C++、C#、SQLなどの言語を主に利用するので

shBrushCpp.js
shBrushCSharp.js
shBrushSql.js

をアップロードしました。

●テンプレートのカスタマイズ(ファイルのパスは自分の環境で読み替えてください。)
FC2ブログの管理メニューより「環境設定>テンプレートの設定」を開き、現在利用しているテンプレートの「編集」リンクを押します。

HTMLのヘッダ部に以下のコードを挿入します。

BODYタグの後に、shCore と、アップロードした言語対応の js ファイルへのリンクを追加します。

一番下の BODY 終了タグの手前に javascript を挿入します。
すでに利用しているスタイルシートで PRE タグの定義を書いていたら、コメントアウト、または削除します。
テンプレートを保存します。

●投稿についての注意
投稿時は、文章とソースコード表示用HTMLをテキストエディタで書いて準備してから貼り付けたほうがよいでしょう。投稿にソースコードを埋める場合は、文章の改行位置で明示的に「<br />」を記述するようにし、投稿時のプロパティで「改行の扱い:HTMLタグのみ」を選択してアップロードするようにします。

●ソースコードの記述方法
ソースコード内では不等号記号(タグ記号)、ダブルクォートなどはエスケープして記述してください。

クラス名は、言語に対応したエイリアス名(複数ある場合はいずれか)を指定します。

C言語: cpp, c, c++
C#: c#, c-sharp, csharp
CSS: css
Delphi: delphi, pascal
Java: java
Java Script: js, jscript, javascript
PHP: php
Python: py, python
Ruby: rb, ruby, rails, ror
Sql: sql
VB: vb, vb.net
XML/HTML: xml, html, xhtml, xslt

このような感じでソースがきれいに埋め込めるようになると思います。

▼参考サイト
あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net
ソースコードを飾るsyntaxhighlighter FC2ブログでの導入メモ
FC2ブログでSyntaxHighlighter オニオンソード!!
dp.SyntaxHighlighter-コード表示に役立つJavaScript - WEBデザイン BLOG
関連記事

※コメントを頂けると大変うれしいです。コメントはお気軽にどうぞ^-^

テーマ : プログラミング ジャンル : コンピュータ

00:12  |  パソコンあれこれ  |  Trackback(1)  |  Comment(0)  |  EDIT  |  Top↑

*Comment

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示
 

*Trackback

この記事のトラックバックURL

この記事へのトラックバック

ブログはじめ

調べたことのメモや考えを書き連ねる・・・ ”チラシの裏”的な使い方をするためにblog始めてみました。 C#を中心に勉強したことなどを殴り...
2008/12/01(月) 23:20:43 | Creation^2
 | BLOGTOP |