Tag Archives: CodeMirror

CodeMirror for CodeEditor バージョン0.5 リリース

「CodeMirror for CodeEditor バージョン0.5」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.5では内包する「CodeMirror」ライブラリをアップデートしている。 新機能としては、タブをマーカーで表示して、タブによるインデントを見えるようにする機能が追加された。 また、検索、置換機能が新しくなり、キー操作によって必要な時だけ表示するタイプに変わった。 そのためツールバーは、以前のバージョンに比べてすっきりしている。 例えば、検索機能は、CtrlとFキーの同時押しで起動する。(または、CmdとFキー) その他の操作は下記の通り。 下候補:CtrlとGキーを同時に押す。(または、CmdとGキー) 上候補:Shift、CtrlとGキーを同時に押す。(または、Shift、CmdとGキー) 置換:Shift、CtrlとFキーを同時に押す。(または、Cmd、OptionとFキー) 全置換:Shift、CtrlとRキーを同時に押す。(または、Shift、Cmd、OptionとFキー) ただし、フルスクリーンモードでは、検索、置換機能が使えなくなった。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

CodeMirror for CodeEditor バージョン0.4 リリース

「CodeMirror for CodeEditor バージョン0.4」をリリースした。 バージョン0.4 2011/10/30 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.4では、新しい機能の追加はないが、内包する「CodeMirror」ライブラリをアップデートしている。 このバージョンで採用した「CodeMirror」ライブラリは、正式リリースのものではなく、開発中のものであり、バージョン2.16の修正版(2.16-22)に当たる。 開発中のバージョンを採用した事には理由がある。 以前のバージョンでは、IEで参照するとタブがスペースに変換され、インデントが正しく反映されない問題が発生しており、以前から気になっていた。 この問題は、バージョン2.16で解消しており、このプラグインでもバージョン2.16を新たに採用するつもりであったが、テストした結果、新たに別の問題が発生していることが分かり、これら全ての問題を解消するために開発中のバージョンを採用した。 なお「CodeMirror」の開発チームは、仕事に熱心で、レスポンスが良く、バグとして報告すれば、直ぐに対応して貰える。 マイナーな用途のライブラリではあるが、こう言った点からも、今後、この手のライブラリの主流の1つになることが予想される。 バグを報告したり、パッチを提供したりするユーザーも増えて来ているようなので、開発自体も更に盛り上がって行きそうだ。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

テキストエリアのソースコードの強調表示に適した「CodeMirror」

この記事で紹介する「CodeMirror」は、<textarea>タグを使ったテキストエリアに表示されるソースコードの強調表示に適したJavaスクリプトライブラリである。 公開中のWordPress用プラグイン「CodeMirror for CodeEditor」でも、このライブラリを使用している。 「WP SyntaxHighlighter」でも、同様にソースコードを強調表示する「SyntaxHighlighter」と言うライブラリを使用しているが、「SyntaxHighlighter」が任意の場所のソースコードを対象しとているのに対して、「CodeMirror」は、<textarea>タグを使ったエディタ上のソースコードの強調表示に適している。 「WordPress」を例に上げると、「SyntaxHighlighter」が記事内のソースコードなどフロントエンドの強調表示に適しているのに対して、「CodeMirror」は、ダッシュボード上のテーマエディターやプラグインエディターに適していると言える。 テキストエディタでも、強調表示に対応したものが多いが、「CodeMirror」は、それと同様の事をウェブベースのテキストエディタ上で実現できる。 「CodeMirror」は、バージョン0.x系のリリースが続いた後に「CodeMirror 1.0」と「CodeMirror 2.0」が同時にリリースされているが、「1.0」と「2.x」ではAPIに違いがあるので互換性がない。 作者によると、今後は「CodeMirror 2.x」の方に力を入れていくようであるため、この記事では、「CodeMirror 2.x」について書く。 「CodeMirror」は、制限が少ないMITライセンスと互換性があり、様々なシステムの中で利用し易い。 「CodeMirror 2.x」には、コアのJavaスクリプト、コアのCSSの他、見た目を変えるための各テーマ用のCSS、各言語を定義したJavaスクリプトが含まれている。 ダウンロードファイルのうち、実際に必要なファイル群は、下記の通りである。 libフォルダ・・・基本的なJavaスクリプトとCSS。 themeフォルダ・・・各テーマ用CSS。 modeフォルダ・・・各言語を定義したJavaスクリプト。 ウェブサイトへの導入は、それほど難しくない。 まず、ヘッダ部分で下記のCSSとスクリプトを読み込む。パスは自身の環境に合わせて変更すること。 <link rel=”stylesheet” href=”lib/codemirror.css”> <link rel=”stylesheet” href=”theme/default.css”> <script src=”lib/codemirror.js”></script> <script src=”mode/css/css.js”></script> <script src=”mode/javascript/javascript.js”></script> <script src=”mode/xml/xml.js”></script> <script src=”mode/htmlmixed/htmlmixed.js”></script> 「codemirror.css」は、コアのCSSであり、読み込みは必須。 上記の例では、テーマは「default」を使用しているが、他のテーマを使用する場合は、「default.css」に加えて、そのテーマのCSSを読み込むようにする。 「codemirror.js」が、コアのJavaスクリプトになる。 4行目以降で、言語を定義するJavaスクリプトファイルを読み込む。 例では、CSS、Javaスクリプトが混在したHTMLを強調表示するために「htmlmixed.js」を使っているが、この場合は「css.js」、「javascript.js」、「xml.js」の後で読み込む必要がある。 このように「CodeMirror」では、複数の言語が混在するテキストを強調表示することも出来る。 PHPなどC言語に近い構文を持つ言語をサポートする「clike.js」を使う際にも、Javaスクリプトを読み込む順序が問題になるが、言語を定義するJavaスクリプトと同じフォルダに実行サンプルの「index.html」が収まっているので、このソースを確認すると良いだろう。 続いて、ページの後半、テキストエリア部分より後ろに、下記を記述を追加する。 <script> var editor = CodeMirror.fromTextArea(document.getElementById(“code”), { mode: “text/html”, theme: “default”, indentUnit: 4, indentWithTabs: false, tabMode: “shift”, enterMode: “keep”, electricChars: false, lineNumbers: true, firstLineNumber: 1, gutter: false, fixedGutter:false, matchBrackets: true }); </script> 2行目で、<textarea>タグのid属性の属性値を記述する。例では「code」になっている。 3行目以降は、パラメーターの定義である。 以下に、パラメーターの一部をまとめる。 mode・・・言語を言語名またはMINEタイプで指定。値:”javascript”、”text/javascript”等。 theme・・・テーマを指定。値:”default”/”cobalt”/”eclipse”/”elegant”/”neat”/”night”。 identUnit・・・タブによるインデントのサイズを半角スペースの数で指定。値:数値。 indentWithTabs・・・行の先頭の半角スペース8個分が1つのタブで置き換えられる。値:true/false。 tabMode・・・Tabキーを押した時の動作を指定。値:”classic”/”shift”/”indent”/”default”。 enterMode・・・改行した時の動作を指定。値:”indent”/”keep”/”flat”。 electricChars・・・構文上、意味を持つ「{ }」などが入力された際に、自動的にインデントする。値:true/false。 lineNumbers・・・行番号の表示、非表示。値:true/false。 firstLineNumber・・・行番号の開始番号。値:true/false。 gutter・・・「gutter」は、行番号の表示エリアを指すが、厳密には、行番号をクリックすることで印を付ける事が出来るマーカーエリアの表示、非常の指定。「true」ならlineNumbersが「false」の場合も「gutter」は表示される。値:true/false。 fixedGutter・・・「true」なら水平スクロールバーでスクロールしても、「gutter」は表示されたままになる。値:true/false。 matchBrackets・・・「true」なら「(」、「)」、「{」、「}」、「[」、「]」が選択された時に、対応する括弧と共に強調表示する。値:true/false。 なお、動作と記述は、配布サイトのデモページやダンロードファイルのdemoフォルダ内のファイルで確認できる。 以下のサンプルでは、ドロップダウンリストでテーマの変更、「Esc」または「F11」キーで、通常モード/フルスクリーンモードの切り替えが可能になっている。 <!doctype html> <?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html … 続きを読む →

Posted in ネット・PC | Tagged | Leave a comment

CodeMirror for CodeEditor バージョン0.3 リリース

「CodeMirror for CodeEditor バージョン0.3」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.3では、設定画面を設け、各パラメーターの設定が可能になった。 これによって、デフォルトのテーマの選択、行番号の表示/非表示、インデントの設定などが可能になっている。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

CodeMirror for CodeEditor バージョン0.2 リリース

「CodeMirror for CodeEditor バージョン0.2」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.2では、「テーマエディター」、「プラグインエディター」に、検索、置換機能を付加するツールバーが追加された。 また、関数などの入力を補完する「オートコンプリート」を搭載した。 これによって、標準の「テーマエディター」、「プラグインエディター」が、コードエディターとして、より使い易いものになっている。 テーマに関しても、フルスクリーンモード切替時の制限を無くし、フルスクリーンモードでの切り替えもサポートした。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

テーマ、プラグインエディターを強調表示するプラグイン「CodeMirror for CodeEditor」リリース

WordPress用プラグイン、「CodeMirror for CodeEditor バージョン0.1」を新たにリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード 「CodeMirror for CodeEditor」は、WordPressの管理画面上のテーマエディター、プラグインエディターに表示されるソースコードを強調表示する。 下手に強調表示しない方が見やすいのではないかと言う話もあるが、そこは、気にしないで欲しい。 加えて「テーマエディター」、「プラグインエディター」を活用している人間がどれだけいるのかと言う問題もあるが・・・。 なお、このプラグインは、ソースコードの強調表示のためにJavaスクリプトライブラリの「CodeMirror」を利用している。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment