書けたら書く: 開設

自分がPCでやったことをメモする領域が欲しかったのでブログサービスを検索。
ソースコードやコマンドやHTMLなども書きたいので簡単に色分け出来るところがいい。
検索して最初に見つかったのが「ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす」と「BloggerにソースコードをハイライトするSyntaxHighlighterを導入する」。
良さそうな感じなので、bloggerに決定。
SyntaxHighlighter は blogger 以外でも使えるけど、新たにアカウントを作るのも面倒だし。

ブログの内容はPC以外もあるかもしれないし、まだ未定。更新頻度も未定。

使わなさそうなものも含めて、「Bash/shell」「C++」「CSS」「Diff」「JavaScipt」「Java」「Perl」「Plain Text」「SQL」「XML,XHTML,XSLT,HTML」を有効にしてみた。

■ 書式

SyntaxHighlighter - Configuration ら辺を参考にしつつ。

<pre class="brush: ＜エイリアス名＞;
            highlight: [＜強調する行番号をカンマ区切り＞];
            first-line: ＜開始行番号＞;
            gutter: ＜行番号の表示/非表示をtrue/falseで＞;
            html-script: ＜brushで指定した以外にHTML要素もハイライトの有無をtrue/falseで(HTML中にスクリプトがある時に便利)＞;
            toolbar: ＜ツールバーの表示/非表示をtrue/falseで＞;
            ">
  // ココにソースを記述
</pre>

■ サンプル

<pre class="brush: javascript;
            highlight: [4,5,10];  // 4-5 の様な表記は不可
            first-line: 2;
            gutter: true;
            html-script: true;
            toolbar: false;
            ">
&lt;!DOCTYPE html>
&lt;html lang="ja">
  &lt;head>
    &lt;meta charset="UTF-8">&lt;!-- 文字コード -->
    &lt;title>サンプル&lt;/title>
    &lt;script>
      function foo() {
        var result = window.confirm("hogehogeしてもいいですか？");
        if(result) {
          alert("hogehoge");
        }
      }
    &lt;/script>
  &lt;/head>
  &lt;body">
    &lt;h1>サンプル&lt;/h1>
    ほげほげ
    &lt;footer>
      &lt;p>Copyright 20XX&lt;/p>
    &lt;/footer>
  &lt;/body>
&lt;/html>
</pre>

■ サンプルの表示結果

<!DOCTYPE html>
<html lang="ja">
 <head>
    <meta charset="UTF-8"><!-- 文字コード -->
    <title>サンプル<title>
    <script>
      function foo() {
        var result = window.confirm("hogehogeしてもいいですか？")
        if(result) {
          alert("hogehoge");
        }
      }
    </script>
  </head>
  <body">
    <h1>サンプル</h1>
    ほげほげ
    <footer>
      <p>Copyright 20XX</p>
    </footer>
  </body>
</html>

■ 注意点

ソースコード中の「<」は「<」に置換すること

■ メモ

テンプレートを変更すると、せっかく設定した SyntaxHighlighter の設定内容も消えてしまうのでメモを残しておく。
設定画面＞テンプレート＞「HTMLの編集」ボタン＞タグの直前に以下の内容をコピーペ

<!-- IKE:ADD: SyntaxHighlighter の設定 [START] -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!-- IKE:ADD: SyntaxHighlighter の設定 [END] -->

書けたら書く

2014年8月6日水曜日

開設

0 件のコメント:

コメントを投稿