acオンラインコードエディタの使用
67735 ワード
OJプロジェクトの中には、エディタプラグインが必要です.Githubでは、この強力なエディタプラグインを見つけました.
概要
これはオープンソースのフロントエンドコードエディタです.
githubアドレス:ace
AceはJavaScriptで作成した独立コードエディタです.私たちの目標はブラウザベースのエディタを作成して、TextMate、VimまたはEclipseなどの本マシンエディタの機能を整合して拡張することです.どのページやJavaScriptアプリケーションにも簡単に組み込むことができます.
特性 120言語を超えるシンタックスハイライト表示(TextMate/Sublime/.tmlaggeファイルを導入できます) が20個以上のテーマ(TextMate/Sublime/.tmthemeファイルを導入できます) 自動字下げと字下げ オプションコマンドライン 大きなファイルを処理する(最後のチェック、上限は4,000,000行) 完全にカスタマイズ可能なキーバインディングは、vimとEmacsモード を含む.検索して正規表現に置き換える マッチする括弧を強調表示する ソフトラベルとリアルラベルの間で を切り替えます.隠し文字 を表示します.マウスでテキストをドラッグ&ドロップする 改行 コード折りたたみ 複数のカーソルと選択 リアルタイム文法チェック(現在はJavaScript/CoffeeScript/CSS/XQuery) 切り取り、コピーと貼り付け機能 使用はjsライブラリファイルを導入する.ここではCNDリソースを使って、GitHubにjsファイルをダウンロードしてプロジェクトに導入することもできます. は、コードで領域を編集し、容器にiをセットするコンテナが必要です.必ず容器に高さ を設置してください.は、editorオブジェクトを生成し、対応する属性 を設定する.
完全コード設定言語とコードスタイルのエースは、いくつかの言語コードをサポートしています.ここでは、いくつかの一般的な言語とコードスタイルを列挙します.
概要
これはオープンソースのフロントエンドコードエディタです.
githubアドレス:ace
AceはJavaScriptで作成した独立コードエディタです.私たちの目標はブラウザベースのエディタを作成して、TextMate、VimまたはEclipseなどの本マシンエディタの機能を整合して拡張することです.どのページやJavaScriptアプリケーションにも簡単に組み込むことができます.
特性
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
charset="utf-8"></script>x
<pre id="code" style="min-height:400px;">pre>
//
editor = ace.edit("code");
// ( , github )
theme = "xcode";
language = "c_cpp";
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//
editor.setFontSize(18);
// (true , )
editor.setReadOnly(false);
// , off
editor.setOption("wrap", "free")
//
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
の一般的な方法 // editor
//
var code=editor.getValue();
//
editor.setValue();
完全コード
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editortitle>
<script src="../../static/js/jquery-3.4.1.min.js">script>
head>
<body>
<div style="width: 80em;border-color: black;">
<pre id="code" style="min-height:400px;">pre>
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
charset="utf-8">script>
<script>
$('.language').change(function () {
editor.session.setMode("ace/mode/" + $(this).val());
});
$('.theme').change(function () {
editor.setTheme("ace/theme/" + $(this).val());
});
//
editor = ace.edit("code");
// ( , github )
theme = "xcode";
language = "c_cpp";
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//
editor.setFontSize(18);
// (true , )
editor.setReadOnly(false);
// , off
editor.setOption("wrap", "free");
//
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
script>
body>
html>
[外部チェーン写真の転送に失敗しました.ソース局は防犯チェーン機構があるかもしれません.画像を保存して直接アップロードすることをお勧めします.(img-HS 94 BB 62-1559072431947)(aceフロントエンドコードエディタの使用/1.png).
<select class="language">
<option value="c_cpp" selected>coption>
<option value="c_cpp">c++option>
<option value="java">javaoption>
<option value="python">pythonoption>
select>
<select class="theme">
<option value="xcode">xcodeoption>
<option value="clouds">cloudsoption>
<option value="clouds_midnight">clouds_midnightoption>
<option value="cobalt">cobaltoption>
<option value="dawn">dawnoption>
<option value="idle_fingers">idle_fingersoption>
<option value="kr_theme">kr_themeoption>
<option value="merbivore">merbivoreoption>
<option value="merbivore_soft">merbivore_softoption>
<option value="mono_industrial">mono_industrialoption>
<option value="monokai">monokaioption>
<option value="nord_dark">nord_darkoption>
<option value="pastel_on_dark">pastel_on_darkoption>
<option value="solarized_dark">solarized_darkoption>
<option value="solarized_light">solarized_lightoption>
<option value="katzenmilch">katzenmilchoption>
<option value="kuroir">kuroiroption>
<option value="tomorrow">tomorrowoption>
<option value="tomorrow_night">tomorrow_nightoption>
<option value="tomorrow_night_blue">tomorrow_night_blueoption>
<option value="tomorrow_night_bright">tomorrow_night_brightoption>
<option value="tomorrow_night_eighties">tomorrow_night_eightiesoption>
<option value="twilight">twilightoption>
<option value="vibrant_ink">vibrant_inkoption>
select>
追加言語設定後のソースコード
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editortitle>
<script src="../../static/js/jquery-3.4.1.min.js">script>
head>
<body>
<div style="width: 80em;border-color: black;">
<select class="language">
<option value="c_cpp" selected>coption>
<option value="c_cpp">c++option>
<option value="java">javaoption>
<option value="python">pythonoption>
select>
<select class="theme">
<option value="xcode">xcodeoption>
<option value="clouds">cloudsoption>
<option value="clouds_midnight">clouds_midnightoption>
<option value="cobalt">cobaltoption>
<option value="dawn">dawnoption>
<option value="idle_fingers">idle_fingersoption>
<option value="kr_theme">kr_themeoption>
<option value="merbivore">merbivoreoption>
<option value="merbivore_soft">merbivore_softoption>
<option value="mono_industrial">mono_industrialoption>
<option value="monokai">monokaioption>
<option value="nord_dark">nord_darkoption>
<option value="pastel_on_dark">pastel_on_darkoption>
<option value="solarized_dark">solarized_darkoption>
<option value="solarized_light">solarized_lightoption>
<option value="katzenmilch">katzenmilchoption>
<option value="kuroir">kuroiroption>
<option value="tomorrow">tomorrowoption>
<option value="tomorrow_night">tomorrow_nightoption>
<option value="tomorrow_night_blue">tomorrow_night_blueoption>
<option value="tomorrow_night_bright">tomorrow_night_brightoption>
<option value="tomorrow_night_eighties">tomorrow_night_eightiesoption>
<option value="twilight">twilightoption>
<option value="vibrant_ink">vibrant_inkoption>
select>
<pre id="code" style="min-height:400px;">pre>
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
charset="utf-8">script>
<script>
$('.language').change(function () {
editor.session.setMode("ace/mode/" + $(this).val());
});
$('.theme').change(function () {
editor.setTheme("ace/theme/" + $(this).val());
});
//
editor = ace.edit("code");
// ( , github )
theme = "xcode";
language = "c_cpp";
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//
editor.setFontSize(18);
// (true , )
editor.setReadOnly(false);
// , off
editor.setOption("wrap", "free");
//
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
script>
body>
html>