Ace Editor を表示してテーマや言語モードを変更する方法

Ace Editor は ブラウザで動作するコードエディタです。MITライセンスで使用できます。 このブログでも、コードを表示する際は Ace Editor を使用しています。

この記事では、Ace Editor の使用方法について説明します。

CDNを使用した Ace Editor の表示方法

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>Ace Editor sample</title>
    </head>
    <body>
      <div id="editor" style="height: 600px">console.log("hello world");</div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
      <script>
        var editor = ace.edit("editor");
        editor.$blockScrolling = Infinity;
        editor.setOptions({
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true
        });
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
        editor.setFontSize(20)
      </script>
    </body>
    </html>

ブラウザで表示すると、以下のように Acce Editor が表示されます。

この例では、

  • テーマ:monokai
  • 言語モード:javascript
  • フォントサイズ:20

としています。

div#editorの中のテキストが Ace Editor の中にコードとして表示されます。

Javascript から Ace Editor の中に表示するコードを変更するには

    var editor = ace.edit("editor");
    
    editor.setValue(CodeValue);

このように、setValueメソッドを使用します。

テーマを変更するには

editor.setTheme メソッドを使用して変更します。

指定可能なテーマは Ace Kitchen Sink を 参照ください。

言語モードを変更するには

editor.getSession().setMode メソッドを使用します。

指定可能なモードは同じく Ace Kitchen Sink の Mode を参照ください。

フォントサイズを変更するには

editor.setFontSize メソッドを使用します。フォントサイズを数値で指定します。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱