Symfoware

Symfowareについての考察blog

CodeMirrorを使って、コードをハイライト表示

GistクローンのHesoをDebianで動かす
http://symfoware.blog68.fc2.com/blog-entry-1047.html

ここでHesoをインストールしました。

軽く触ってみて驚いたのが、ソースコードを入力するエディタ。
リアルタイムでハイライトし、括弧・閉じ括弧の対応をわかりやすく表示してくれます。

147_01.png


こいつは一体何者なんだろうと思ってソースを見てみると、
CodeMirrorというライブラリらしい。

http://codemirror.net/

ヘルプが充実しているのですが、軽く使い方をメモしておきます。




ダウンロード



http://codemirror.net/

「Download the latest release」をクリック

147_02.png


codemirror.zipがダウンロードできます。
解凍するといくつかフォルダが出てきますが、最低限必要なのは、
「lib」と「mode」です。

147_03.png



「lib/lib/codemirror.js」と「lib/codemirror.css」を取り込む。
表示する言語に応じて、「mode/[言語名]/[言語名].js」を取り込む。
というのが基本ルール。

試しに、Python表示を試してみます。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>CodeMirror - 一番簡単な使い方</title>
  6.     <script src="lib/codemirror.js"></script>
  7.     <link rel="stylesheet" href="lib/codemirror.css">
  8.     <script src="mode/python/python.js"></script>    
  9. </head>
  10. <body>
  11.     <h1>Codemirrorのサンプル</h1>
  12.     <br />
  13.     <h2>とりあえず表示</h2>
  14.     <div><textarea id="code" name="code">#u'mode: "python"を指定
  15. print(u'日本語でこんにちは')
  16.     </textarea></div>
  17.     <script>
  18.      CodeMirror.fromTextArea(document.getElementById("code"), {mode: "python"});
  19.     </script>
  20. </body>
  21. </html>




ちょっとわかりにくいですね。

147_04.png



行番号も表示してみます。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>CodeMirror - 一番簡単な使い方</title>
  6.     <script src="lib/codemirror.js"></script>
  7.     <link rel="stylesheet" href="lib/codemirror.css">
  8.     <script src="mode/python/python.js"></script>    
  9. </head>
  10. <body>
  11.     <h1>Codemirrorのサンプル</h1>
  12.     <br />
  13.     <h2>行番号を表示</h2>
  14.     <div><textarea id="code" name="code">#u'mode: "python"を指定
  15. print(u'日本語でこんにちは')
  16.     </textarea></div>
  17.     <script>
  18.      CodeMirror.fromTextArea(document.getElementById("code"), {mode: "python", lineNumbers: true});
  19.     </script>
  20. </body>
  21. </html>




147_05.png


いい感じ。



その他、ここに指定可能なオプションが網羅されています。
http://codemirror.net/doc/manual.html


また、今回の簡単なサンプルを以下に保存しておきます。
http://symfo.web.fc2.com/js-sample/codemirror/sample1.html
関連記事

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

  1. 2012/12/15(土) 18:16:40|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<hgコマンドでBitbucketにプッシュする | ホーム | GistクローンのHesoをDebianで動かす>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/1048-9d1fbfa7
この記事にトラックバックする(FC2ブログユーザー)