JustBlog(TypePad)でsyntaxhighlighterを使う

syntaxhighlighterとは、プログラムをwebに載せる時に見やすくしてくれる
Syntaxhighlighter_2
これです。

syntaxhighlighter – Google Code
http://code.google.com/p/syntaxhighlighter/

JustBlogだけでなくTypePad純正やココログ等のTypePad利用ブログでも同じやり方で使えると思います。

使い方は、downloadsからアーカイブをダウンロードして、wiki -> usageに書いてある通りに設定するだけです。

  1. 必要なファイルをアップロードして
  2. CSSを記述
  3. JavaScriptを記述
  4. preかtextareaの中にコードを書く

この4ステップです。

以下JustBlogの場合の設定です。適宜読み替えてください。

必要なファイルをアップロード

ホーム ->  コントロールパネル -> ファイル・マネージャー
からファイルをアップロードします。好きな場所にアップロードすればいいですが
/css/SyntaxHighlighter.css
/flash/clipboard.swf
/js/shBrushCSharp.js, /js/shBrushCpp.js, /js/shBrushCss.js, /js/shBrushDelphi.js, /js/shBrushJScript.js, /js/shBrushJava.js, /js/shBrushPhp.js, /js/shBrushPython.js, /js/shBrushRuby.js, /js/shBrushSql.js, /js/shBrushVb.js, /js/shBrushXml.js, /js/shCore.js, /js/ shCore.uncompressed.js
としておけばあとでわかりやすいです。

CSSを記述

ホーム -> ブログ -> デザイン -> カスタムCSSを編集

@import url(/css/SyntaxHighlighter.css);
自分の置いたcssの位置を記入して保存します。他にもカスタムCSS使ってる場合は@importが先に来るように注意します。

JavaScriptを記述

ホーム -> タイプリスト
から新しいタイプリストを作ります。リストの種類はリンクかメモがいいです。作ったら、中にJavaScriptを書き込みます。もちろん既存のタイプリストに付け加えてもOKです。

<script type="text/javascript" src="/js/shCore.js"></script>
<script type="text/javascript" src="/js/shBrushXml.js"></script>
<script type="text/javascript" src="/js/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/shBrushSql.js"></script>
<script type="text/javascript" src="/js/shBrushCss.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

shCore.jsが必須であとは必要なものを読み込ませます。

preかtextareaの中にコードを書く

preとtextareaの使い分けはwiki->usageを読んでください。<>&"に気をつけておいてpre使ったほうがjavascript動かない環境でもきれいに見えます。<pre name="code" class="hoge"></pre>でコードを囲えば出来上がりです。

広告

JustBlog(TypePad)でsyntaxhighlighterを使う」への2件のフィードバック

  1. google sitesでsyntax highlighterできず

    google sitesでsyntax highlighterを使おうとしたけれどうまく使えなかった話。ダメだった理由 google sitesのwysiwygエディタが手書きのpreタグ内classを消し去ってしまうから。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中