LaravelプロジェクトのCodemirrorを設定する方法

This post was originally published at PostSrc 🔥🔥🔥 . このようなチュートリアルのような場合は、訪問を与える場合は本当に感謝します.
このポストでは、あなたはCodeMirror あなたのLaravelプロジェクトのために.CodeMirrorはJavaScriptで実装されている非常に汎用性のあるテキストエディタですが、このチュートリアルでは、コード例を表示するCodemErrorを使用し、適用することによってそれを美化しますlanguage modes and themes .
始めましょう
まず、“NPM”または“糸”を介して依存関係をインストールします.

yarn add codemirror

次に、新しいJSファイルを作成し、リソースフォルダ内の「コードミラー. js」という名前を付けます.これは、ララベルミックスに処理されます.

# laravel mix

const mix = require('laravel-mix');

mix.js('resources/js/code-mirror.js', 'public/js');

CodeErrorインスタンスを初期化する
「JS/コードミラー. js」の内容はCodemErrorのためのインポートと初期化であるべきです.この例では、PHPモードに集中しますが、他のプログラミング言語で使用する場合は、ドキュメントで利用可能な他のモードをチェックアウトしてください.

/* resources/js/code-mirror.js */

import CodeMirror from 'codemirror';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/php/php.js';

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    theme: 'dracula',
    matchBrackets: true,
    mode: "application/x-httpd-php",
    indentUnit: 4,
    indentWithTabs: true,
    tabSize: 4,
    lineWrapping: true,
});

インポートCodemirrorスタイルとテーマ
CodeErrorエディタ自体を表示するスタイルをインポートすることが重要です.あなたの“scss”または“css”ファイルから次のようにインポートします.あなたが他のテーマが箱から提供される完全なテーマのために彼らのドキュメントをチェックしないならば、輸入されるテーマが「ドラキュラ」テーマであることに注意してください.

/* code mirror */
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/dracula.css';

ブレードレイアウトのスクリプトを参照
最後に、プロジェクトのブレードレイアウトファイルのスクリプトを参照します.あなたがレンダリングしたいコードソースは、たとえば、Laravelモデルのいずれかから、コード/ポスト/記事/デモモデルインスタンスを使用できます.以下のようなTextAreaにコードインスタンスを渡し、CodeErrorインスタンスを初期化するために使用しているので、idを“code”に設定してください.

<textarea id="code">{!! $model->code !!}</textarea>

<script src="{{ asset('/js/code-mirror.js') }}"></script>

プレビュー
以下は、ブラウザ上のCodemirrorエディタのプレビューであり、別の表示されるテーマに応じて.

余分:ハイライトを使用する.js
あなたが強調コードへの他のアプローチに興味があるならば、あなたは一見を持つことができますUsing highlight.js on Laravel project .
今ではいくつかの簡単な手順であなたのウェブサイト上でCodemirrorを実装する方法を学んだことになります.あなたが役に立つこのチュートリアルを見つけるならば、他と歓声でそれを共有してください🍻. ハッピーコーディング!