構文のハイライトとライン番号を備えた死んだシンプルなコードエディター。 3kb/z
編集者はVue 2.xとVue 3.xの両方で動作し、現在、Vue 2.xをサポートするブランチにいます。 VUE 3.X互換バージョンにアクセスしてください
prism-editor.netlify.com
ACE、Codemirror、Monacoなどのいくつかのブラウザベースのコードエディターは、Webページにフル機能のコードエディターを埋め込む機能を提供します。ただし、追加機能なしで構文を強調しているシンプルなエディターが必要な場合、通常は小さなバンドルサイズのフットプリントがないため、過剰になる可能性があります。このライブラリは、追加機能なしでサポートを強調表示する構文をシンプルなコードエディターに提供することを目的としています。これは、ユーザーがコードを送信できるシンプルな埋め込みやフォームに最適です。
npm install vue-prism-editorまたは
yarn add vue-prism-editor構文の強調表示を提供するサードパーティライブラリを備えたエディターを使用する必要があります。たとえば、Prismjsをフォローするように見えます。
コンポーネントをローカルに登録して使用します（推奨）
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >構文ハイライターによっては、構文の強調表示に追加のCSSを機能させる必要がある場合があることに注意してください。
または、コンポーネントをグローバルに登録します
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;ブラウザの使用（Codepenなどの場合）：
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | 名前 | タイプ | デフォルト | オプション | 説明 |
|---|---|---|---|---|
Vモデルvalue | string | "" | - | エディターの現在の値、つまり表示するコードを表示します |
| ハイライト | string => string | - | - | 強調表示するテキストを受信するコールバック。 prismjsなどのライブラリを使用して、構文を強調表示してHTML文字列を返す必要があります。 |
| 読みます | Boolean | false | - | 読みます |
| Linenumbers | Boolean | false | - | 行番号を表示するかどうか。デフォルトのfalse |
| オートスチルエリネンズ | Boolean | true | - | ライン番号のテキストの色をテーマにマッチします。デフォルトはtrue |
| Tabsize | number | 2 | - | Tabキーを押すときに挿入する文字の数。たとえば、4つのスペースインデントの場合、 tabSize 4になり、 insertSpaces trueになります。デフォルト： 2 |
| 挿入スペース | boolean | true | - | インデントにスペースを使用するかどうか。デフォルト： true 。 falseに設定した場合、 tabSize 1に設定することもできます |
| Ingoretabkey | boolean | false | - | エディターがタブキープレスを無視して、キーボードユーザーがエディターを通過できるようにする必要があるかどうか。ユーザーはCtrl+Shift+M （MAC） / Ctrl+Mを使用してこの動作をfalseことができます。デフォルト： false |
| 名前 | パラメーター | 説明 |
|---|---|---|
| 入力 | (code) | コードが変更されたときに火災が発生します。 |
| キーダウン | (event) | このイベントは、エディターでキーダウンイベントが発生したときに放出されます |
| キーアップ | (event) | このイベントは、編集者でキーアップイベントが発生したときに放出されます |
| クリック | (event) | このイベントは、編集者のどこでもクリックすると放出されます |
| 集中 | (event) | このイベントは、フォーカス時に放出されます |
| ぼやけ | (event) | このイベントは、ぼやけたときに放出されます |
この部分は、React-Simple-Code-Editorから取得されます
これは、 <textarea>上で強調表示されている<pre>ブロックを強調する構文をオーバーレイすることで機能します。タイプ、選択、コピーなどを入力すると、基礎となる<textarea>と対話するため、エクスペリエンスはネイティブになります。これは、動作を再実装する他の編集者と比較して非常に簡単なアプローチです。
構文の強調表示は、HTMLを返し、ユーザーが完全に制御できる限り、サードパーティライブラリで実行できます。
Vanilla <textarea> 、インデントのためのタブ文字の挿入をサポートしていないため、 keydownイベントを聞いてテキストをプログラム的に更新することで再実装します。プログラムでテキストを更新することの1つの注意事項は、元に戻すスタックを失うことです。そのため、独自の元のスタックを維持する必要があります。その結果、VSCodeなどの編集者と同様の単語全体を元に戻すなど、改善された元に戻す動作を実装することもできます。
動作のために、特定の制限があります。
<textarea>に並べることで動作するため、レイアウトに影響するものを変更すると、誤って整理できます。-webkit-text-fill-color: transparentを使用してTextareaにテキストを非表示にします。これは、すべての最新のブラウザー（FirefoxやEdgeなどの非ウェブキットのブラウザーでも機能します）で機能します。 IE 10+では、カーソルを非表示にしないcolor: transparentを使用します。テキストは、サポートされていないブラウザで大胆に見える場合があります。 React-Simple-Code-Editor
mit
