code input
2.4.0
任意のHTML形式に配置できる、完全にカスタマイズ可能で編集可能なSyntax-Highlighted Textareas。 [デモを見る]
このデモンストレーションでは、Prism.jsとhighlight.jsのテーマを使用しています。これは、コード入力と互換性が適切に機能し、互換性が組み込まれている2つの構文ハイライトプログラムです。
フロントエンドJavaScriptライブラリ、
code-inputにより、HTMLカスタム要素を使用して、通常のJavaScript Syntax-Highlightingテーマとプログラムをカスタマイズ可能なSyntax-Highlighted Textareasに変換できます。バニラCSSを使用して、 pre codeブロックにtextareaを重ね、インデントを処理し、スクロールし、結果のバグをJavaScriptで修正します。舞台裏でどのように機能するかを確認するには（このライブラリの使用方法ではありません）、私が書いたこのCSS-Tricksの記事をご覧ください。
他のフロントエンドコード編集プロジェクトとは異なり、 code-input仕組みのシンプルさは、高度にカスタマイズ可能であることを意味します。フル機能のエディターではないため、どの機能を含めたいかを選択し、お気に入りのSyntax-Highlightingアルゴリズムとテーマを使用できます。
<code-input>要素は<textarea>のように機能するため、 name 、 value 、 placeholder属性、 onchange 、form resetなどのイベントを使用して、HTML5フォームとサポートで機能します...
また、 code-input 、オープンソースの貢献からオプションのプラグインに多くの機能を蓄積しており、必要な機能を選択できるようになりました。必要な機能が存在しない場合は、問題を開き /貢献してください！
code-inputを開始する（4つの簡単な手順で） code-inputも型をサポートしています（クリック）以下の手順に従うか、highlight.jsについてはこちらで入手可能なスターターコードを使用し、prism.jsにはここで使用できます。
code-input使いやすく、カスタマイズ可能なものになるように設計されています。 SynTax-Highlighted Textareasを作成するために使用する方法は次のとおりです。
code-inputをインポートしますcode-inputのCSSおよびJSファイルをインポートします。非マイニファイドファイルは、開発中に使用するのに役立ちます。 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " > <!--In the <head>-->
< script src =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css " >次のステップはcode-input Syntax-Highlighterにリンクするためのtemplateを設定することです。 prism.jsまたはhighlight.jsを使用している場合、組み込みテンプレートを使用するか、それ以外の場合は独自のテンプレートを作成できます。これらの例では、テンプレートを"syntax-highlighted"として登録していますが、一貫している限り、任意のテンプレート名を使用できます。
highlight.js：
codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . hljs ( hljs , [ ] /* Array of plugins (see below) */ ) ) ;prism.js：
codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . prism ( Prism , [ ] /* Array of plugins (see below) */ ) ) ;カスタム：
codeInput . registerTemplate ( "syntax-highlighted" , new codeInput . Template (
function ( result_element ) { /* Highlight function - with `pre code` code element */
/* Highlight code in result_element - code is already escaped so it doesn't become HTML */
} ,
true , /* Optional - Is the `pre` element styled as well as the `code` element?
* Changing this to false uses the code element as the scrollable one rather
* than the pre element */
true , /* Optional - This is used for editing code - setting this to true sets the `code`
* element's class to `language-<the code-input's lang attribute>` */
false /* Optional - Setting this to true passes the `<code-input>` element as a second
* argument to the highlight function to be used for getting data- attribute values
* and using the DOM for the code-input */ ,
[ ] // Array of plugins (see below)
) ) ;プラグインを使用すると、Highlight.jsの言語オートデテクションの自動インデンテーションやサポートなど、テンプレートに追加の機能を追加できます。それらを使用するには、ただ：
code-inputをインポートした後、テンプレートを登録する前に、プラグインのJSファイルをインポートします。 < script src =" code-input.js " > </ script >
<!--...-->
< script src =" plugins/autodetect.js " > </ script >
< script src =" plugins/indent.js " > </ script >
<!--...-->
< script >
codeInput . registerTemplate ( "syntax-highlighted" ,
codeInput . templates . hljs (
hljs ,
[
new codeInput . plugins . Autodetect ( ) ,
new codeInput . plugins . Indent ( true , 2 ) // 2 spaces indentation
]
)
) ;
</ script >
ショ和 残念ながら、同じタイプの複数のプラグインをテンプレートに配置すると、このような構成が論理的に理にかなっていても、エラーや未定義の動作を引き起こす可能性があります。これは問題＃118であり、できるだけ早く修正されます - あなたが助けて、歓迎したい場合は、メンテナーのTo Doリストのトップにもあります。
プラグインとその機能の完全なリストを表示するには、プラグイン/readme.mdを参照してください。
テンプレートを登録したので、HTMLでCustom <code-input>要素を使用できます。複数のテンプレートが登録されている場合は、テンプレート名をtemplate属性として追加する必要があります。要素を使用すると、 language属性を使用するとlanguage-{value}クラスがpre codeブロックに追加されます。これで、HTML属性とイベント、およびCSSスタイルを使用して、まるでtextarea要素であるかのように、あなたの要素を好きなだけシンプルまたはインタラクティブにすることができます！
< code-input language =" HTML " > </ code-input >または
< code-input language =" HTML " placeholder =" Type code here " template =" syntax-highlighted " onchange =" console.log('Your code is', this.value) " > < href='https://github.com/WebCoder49/code-input' > code-input</a > </ code-input >
ショ和 現時点では、code-input要素のCSSのためにpaddingのではなく、--paddingプロパティを設定する必要があります。他のすべてのプロパティは通常どおり機能する必要があります。
プラグインまたはコア機能などのcode-inputに追加する機能がある場合、またはバグを見つけた場合は、問題を開いたり、フォークを開いてプルリクエストを送信してください。このオープンソースプロジェクトへのすべての貢献は大歓迎です。 CONTRIBUTING.mdファイルで詳細を確認できます。
| ...これまでのところ、プルリクエストを提供しています。 |
| （出典：Contrib.Rocks） |
