入力ボックスを強調表示する構文を作成するための JavaScript 実装のアイデア box_javascript スキル

textarea 要素は、Web IDE で広く使用されています。通常、Web サイトに付属のテキストエリア エディターでは、コードをオンラインで編集したり、コードを強調表示したりする必要があることがよくあります。そのため、これにいくつかの実用的な機能を追加できます。この記事では、JavaScript ライブラリ ACE を使用して入力ボックス効果を作成します。これは完全にオープンソースのスクリプトです。このスクリプトを使用すると、開発者は構文の強調表示をサポートする入力ボックスを作成できます。その後、Web サイトのどこにでもコードを埋め込むことができます
ライブラリをダウンロードする まず、Github から ACE コードをダウンロードする必要があります。 ダウンロード後、解凍し、ヘッダー セクションに js ファイルを挿入します

コードをコピーします コードは次のとおりです:

エディターにコードを追加します。ツール
は、まずエディターの ID を使用して div を設定し、次にスクリプト内で ace.edit() メソッドを呼び出します。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

var editor = ace.edit("editor");
editor.getSession().setMode ("ace/mode/javascript"); 変数​​の名前は変更できます。便宜上、var editor を変数として定義しましたが、var demoeditor を変数として定義することもできます。 2 行目は、使用する言語の強調表示のタイプを宣言します。 src ディレクトリから追加の言語コレクションを選択できます。サポートされている言語のコレクションは次のとおりです:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
追加パラメータ

コードをコピーします コードは次のとおりです。

editor.setTheme("ace /theme /dawn");
editor.getSession().setTabSize(2);
editor.getSession().setUseWrapMode(true);

これらの 3 行のコードは次のとおりです。テキスト入力について 実際には、最初の行でコードのデフォルトの構文の色とテーマが変更されます。src ディレクトリには数十の新しいテーマがあり、そこから選択できます。
他の 2 つのオプションはユーザー エクスペリエンスに関するものです。通常、キーボードの Tab キーを押すと 4 つのスペースが入力されます。また、デフォルトではテキストが自動的に折り返されず、横スクロール バーが追加されて外側に拡張されます。 。しかし、このメソッド setUseWrapMode(true) を使用すると、ワードラップの問題を解決できます。
他にもいくつかのコマンドがあります。ACE ウィザードを参照してください。これには、カーソル位置の変更、新しいコンテンツの動的追加、またはテキストのコピーが含まれます。
CSS コード

コードをコピー コードは次のとおりです:

#editor {
マージン-左: 15 ピクセル;
幅: 1000 ピクセル;
高さ: 400 ピクセル;