自動補完(Autocomplete)の追加
エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き
自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな?
addon
フォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているaddon
をコピーしてくる
. ├── index.html ├── addon // コピーしてくる ├── lib ├── mode └── theme
自動保管を行うためには以下の手順で行う
- 必要なjsファイルとcssファイルを読み込む
- キーマップを設定する
まず、必要なファイルを読み込む
自動補完のためのファイルはaddon/hint
に入っている。今回はCSSの自動補完をしたいため、以下の3つのファイルを読み込む
※ show-hint.jsとshow-hint.cssはどの言語の自動補完をする時も必ず読み込むこと
<head> <script src="addon/hint/show-hint.js"></script> <script src="addon/hint/css-hint.js"></script> <link rel="stylesheet" href="addon/hint/show-hint.css"> </head>
次に、自動保管を行うためのキーマップを設定する。今回はCtrl + Space
で自動補完をするようにする
extraKeys
で指定する
const conf = { extraKeys: {"Ctrl-Space": "autocomplete"}, };
Ctrl+Spaceを押すと以下のように表示される!
おぉ!!できてる!!!
こんな面白いこともできるっぽい!!
CodeMirrorでEmoji AutoCompleteをする
チュートリアルは一段落したから、色々いじってみて、テキストエディタを充実させるぞ!!!
参考文献
エディタのいろいろな設定 CodeMirror - JavaScript
テーマの設定 CodeMirror - JavaScript - TIL の続き
コンストラクタに渡すことで簡単にいろいろな設定ができる
タブのサイズの設定
tabSize
で指定できる。デフォルトは4
- tabSize: integer
例)タブのサイズを8に設定
const conf = { tabSize: 8, };
行数の表示
lineNumbers
で指定する。true
で表示。デフォルトはfalse
- lineNumbers: boolean
const conf = { lineNumbers: true, };
最初の行数の指定
firstLineNumber
で指定する。初期値は1
- firstLineNumber: integer
例)行数を20からにする
const conf = { firstLineNumber: 20, };
たくさん設定できるっぽいからいろいろいじってみよう!!
参考文献
テーマの設定 CodeMirror - JavaScript
シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き
この動画を見て、実際にテーマの変更をしてみた
すごい簡単にできてびっくりした
theme
フォルダにテーマ(.cssファイル)は格納されている
以下のようにtheme
フォルダをコピーしてくる
. ├── index.html ├── lib ├── mode └── theme // コピーしてくる
themeの中を見てみたんだけど、gruvboxがない!!!!!大好きなテーマがなくて少しショック...
テーマの設定
今回はテーマをmonokai
にしてみる
テーマの設定をするには以下のようにする
- theme内にあるcssファイルを読み込む
- CodeMirrorオブジェクト生成時に
theme
でテーマを指定する
まずはCSSの読み込み
<head> ... <link rel="stylesheet" href="theme/monokai.css"> ... </head>
次に、CodeMirrorオブジェクトの生成時にテーマを指定する
theme: テーマ名
とすることで設定できる
<body> ... <script> const editor = CodeMirror(document.getElementById("codeeditor"), { mode: "css", theme: "monokai" /* テーマの設定 */ }); <script> <body>
設定はdictionaryで渡すこともできる!
<body> ... <script> // dictionaryを生成して渡す const conf = { mode: "css", theme: "monokai" }; const editor = CodeMirror(document.getElementById("codeeditor"), conf); <script> <body>
参考文献
シンタックスハイライトの設定 CodeMirror - JavaScript
それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き
この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ
フォルダ構造は以下のようになっている
. ├── index.html ├── lib └── mode
シンタックスハイライトの設定
シンタックスを適用するには以下の手順で行う
- 適用したい言語のシンタックスの設定ファイルを取り込む
- CodeMirrorオブジェクトの生成時に
mode
で言語を指定する
まずはシンタックスの設定ファイルを読み込む
mode
フォルダにいろんな言語のシンタックスの設定ファイル(.jsファイル)が入っている
CSSのシンタックスハイライトをしたい場合、CSSの設定ファイルを取り込む。CSSの設定ファイルは以下の場所にある。
. ├── index.html ├── lib │ ├── codemirror.css │ └── codemirror.js └── mode ... ├── css │ ├── css.js // これがCSSのシンタックスハイライトのファイル │ ├── gss.html │ ├── gss_test.js │ ├── index.html │ ├── less.html │ ├── less_test.js │ ├── scss.html │ ├── scss_test.js │ └── test.js ...
CSSのシンタックスのファイルはmode/css/css.js
なので、以下のように読み込む
(CSSだから少しややこしいけど、JavaScriptの場合、mode/css/javascript.js
となる)
<head> <script src="mode/css/css.js"></script> </head>
もし、なにも読み込んでいなかった場合、色は変わらない
次に、CodeMirrorオブジェクトの生成時にシンタックスを指定する
mode: モード
というように指定する。もし指定しなかった場合(mode
すら渡さない)、最初に読み込んでいるシンタックスの設定ファイルが適用される
<body> ... <script> const editor = CodeMirror(document.getElementById("codeeditor"), { mode: "css" /* CSSのシンタックス */ }); </script> </body>
全体のソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CodeMirror</title> <!-- 以下の2つは必ず読み込む --> <link rel="stylesheet" href="lib/codemirror.css"> <link rel="stylesheet" href="theme/monokai.css"> <script src="lib/codemirror.js"></script> <script src="mode/css/css.js"></script> <style> body { background-color: #ccc; } </style> </head> <body> <div id="codeeditor"></div> <script> const editor = CodeMirror(document.getElementById("codeeditor"), { mode: "css" /* modeの指定 */ }); </script> </body> </html>
参考文献
それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript
CodeMirrorって何!?
JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ!GitHubやCodePenでも使われてる
また、カスタマイズもできるらしく、面白そう!!!!
実装してみた
以下の動画を見るとわかるが、本当にすごい簡単に実装できる。3分もあればできちゃう。
動画をみながら実際にやってみた
準備
CodeMirrorのページからCodeMirrorを動作させるためのファイルをZIPでダウンロードする
ダウンロードし、解凍したら、lib
とmode
という2つのフォルダをコピーしてくる
こんな感じ
. ├── index.html // 作成する ├── lib └── mode
libはCodeMirrorを動作させるために必須な物が入っている。modeは言語のシンタックスの設定ファイル。(themeというものもあるが、これはエディタのテーマ)
次にindex.htmlを編集する
コアとなるCSSとJavaScriptを読み込む
以下の2つはCodeMirrorを使うときには必ず読み込むファイル
- lib/codemirror.css
- lib/codemirror.js
mode
フォルダのファイルには言語のシンタックスの情報が記述されている
<head> ... <!-- 以下の2つは必ず読み込む --> <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> ... </head>
エディタの生成
エディタの生成するにはCodeMirror
オブジェクトを作るだけ
CodeMirrorのコンストラクタである要素を渡すと、その要素の中にエディタを生成してくれる(内側にできるんだね...てっきり外側に出来てるのかと思ってた...)
以下の例では、idがcodeeditor
のdiv要素の中にエディタを生成している
<body> <div id="codeeditor"></div> <script> const editor = CodeMirror(document.getElementById("codeeditor")); </script> </body>
HTMLが読み込まれると、以下のようにエディタができる!!!
(テキストは入力した)
全体のソース
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CodeMirror</title> <!-- 以下の2つは必ず読み込む --> <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <style> body { background-color: #ccc; } </style> </head> <body> <div id="codeeditor"></div> <script> const editor = CodeMirror(document.getElementById("codeeditor")); </script> </body> </html>
参考文献
CodeMirrorを使ってみた - JavaScript
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた
textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた
まずは、http://codemirror.net/ にアクセスしてダウンロードする。(gitでcloneするのもいいらしい)
コーディング
まず、CodeMirrorを使うために必要なファイルをheadで読み込む
<head> <script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <!-- ハイライトしたい言語を選んで読み込むらしい --> <script src="mode/javascript/javascript.js"></script> </head>
第1引数に設定した要素の中にテキストエリアを作成する。第2引数にはテキストエリアの設定をdictionaryで渡すことができる。
CodeMirror(要素, テキストエリアの設定);
body内にテキストエリアを作成してみる
CodeMirror(document.body);
mode
で言語の指定、value
で初期値を設定できる
CodeMirror(document.body, { mode: "javascript", value: "const text = () => {return 0;}" });
縦、横幅の指定
setSize()
で指定できるらしい。
横を100px、縦を200pxに指定する場合
const cm = CodeMirror(elem); cm.setSize("100px", "200px");
すでにある要素と置き換え
/** * CodeMirrorに置き換える * @param {Object} 置き換えるHTMLElement */ const replaceCodeMirror = (elem) => { // 行数の表示 const conf = { lineNumbers: true, }; // 置き換え const editor = CodeMirror(elt => { elem.parentNode.replaceChild(elt, elem); }, conf); editor.setSize("100%", "100%"); }; replaceCodeMirror(document.getElementById("editor1"));
公式ページに乗ってた方法を使って置き換えをしてみた
idがeditor1の要素をCodeMirrorに置き換えている
普通の使い方はtextareaとリンクさせるらしい
いろんな設定ができるらしいから少しずつやっていこう
参考文献
ある要素の前に追加 insertBefore - JavaScript
指定要素の前に要素を追加するにはelement.insertBefore()
を使う
element.insertBere(追加要素, 起点要素)
elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ
実際にやってみた
sub2の前に要素(青い要素)を追加する
See the Pen 指定の要素の前に追加 by tamago (@tamago324) on CodePen.
<div class="main"> <div class="sub default">sub1</div> <div class="sub default" id="ref">sub2</div> <div class="sub default">sub3</div> </div>
// 親要素 const main = document.querySelector(".main"); // 追加要素の作成 const sub4 = document.createElement("div"); sub4.classList.add("sub", "add"); // 起点要素 const ref = document.querySelector("#ref"); main.insertBefore(sub4, ref);
mainの中にあるrefの前にsub4を追加