mmb memo

Androidアプリ開発メモ、Linuxサーバーメモなどの備忘録的メモ

SyntaxHighlighter3.0.83 の記事一覧

スポンサーサイト

--.--.-- (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2プログ内でSyntaxHighlighter3.0.83を使う

2013.05.26 (Sun)

最近プログラム関連をググっていると、コードの表示が綺麗に表示されている方が多いです。
調べてみると、SyntaxHighlighterと言うのを使えば便利そうです。
その時の導入メモです。

導入環境

FC2ブログ
SyntaxHighlighter3.0.83
http://alexgorbatchev.com/SyntaxHighlighter/download/
よりダウンロード。

1.ダウンロードしたzipファイルを解凍

2.ファイルのアップロード

解凍して出来た「syntaxhighlighter_3.0.83」の中の「scripts」、「styles」の中から必ず
・shCore.css
・shCoreDefault.css
・shCore.js
の3つのファイルをFC2にアップロードしなければならない
syn1.png

3.アップロードした3つのアドレスをメモしておく

syn3_1.png

4.その他欲しい言語タイプのスクリプトもアップロード

本家にタイプが書かれている
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
今回は、
「shBrushBash.js」
「shBrushCss.js」
「shBrushJScript.js」
「shBrushJava.js」
「shBrushXml.js」
の5つを追加アップロードした。
こちらもアップロードしたアドレスをメモしておく。

5.テンプレートの編集

FC2ブログのテンプレート設定からHTML設定を開く。 syn4.png

6.<head>の追記

HTML<head> </head>の中に「shCore.css」、「shCoreDefault.css」の2つを以下のように、メモして置いた自分のアドレスに変更して追加する。





7.<body> </body>に追記

<body> </body>の中には以下の様に自分の使いたいタイプを追加する。
こちらもメモしておいた自分のアドレスに変更する必要がある。
「sh.Core.js」は必ず必要である。










8.記事へ書く前に設定

記事編集のしたの方にある「改行の扱い」で「HTMLタグのみ」にチェックを入れる。 ただ、自動改行を受け付けてくれなくなるので、記事を書く時にいちいち改行タグを書く必要が出てくる。
syn5.png

9.記事への書き方

<pre class="brush: js">この間にコードを書く</pre>
<pre class="brush: java">の"brush: java"の部分を"brush: html"などコードの種類に合わせて変更する
例:
<pre class="brush: java">
function foo()
{
}
</pre>
のように書くと下の様にハイライトされて表示される様になる。
function foo()
{
}

10.スタイルを変更する

ダウンロードした「styles」の中には、デフォルトのスタイル以外にも、色々スタイルのテンプレートが用意されている。
例として「Eclipse」に変更してみる。
10.1「shThemeEclipse.css」、「shCoreEclipse.css」をアップロードする。
10.2 アップロードしたアドレスをメモする。
10.3 「6」の様にテンプレートの<head>内のアドレスを変更する。




10.4 更新ボタンをクリックする。
スポンサーサイト
 | HOME | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。