menu
書いてる野郎
orebike@gmail.com
これはツールではなくてライブラリなので、実際にページに組み込んで実装してみる。
Ace - The High Performance Code Editor for the Web ここを参考にすると、 単にこうやればよいらしい。
<!DOCTYPE html> <html lang="en"> <head> <title>ACE in Action</title> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor">function foo(items) { var x = "All this is syntax highlighted"; return x; }</div> <script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/javascript"); </script> </body> </html>
眺めても特に変な部分はなさそうなので、とりあえず、この ace.js を調達する。
https://pagecdn.io/lib/ace/1.4.12/ace.min.js
これでいいっぽい。
なのでソースはこうなる。HTMLとして保存してブラウザで開くと。 一発動作。簡単過ぎる。
<!DOCTYPE html> <html lang="en"> <head> <title>ACE in Action</title> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor">function foo(items) { var x = "All this is syntax highlighted"; console.log("日本語"); return x; }</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/') editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/javascript"); </script> </body> </html>
公式にいくつかのCDNが提示されているが、まともに動かないやつが何個か混じっている。 そして外部リソースを使う場合は、この basePath というのを設定しないと駄目なようだ。