Posts Learn Snippets Categories Tags About
How to set up CodeMirror for Laravel project cover

How to set up CodeMirror for Laravel project

Learn how to set up CodeMirror in laravel to make your code example beautiful and more interactive

1 month ago

8 mins read


In this post, you'll be learning to set up CodeMirror for your Laravel project. CodeMirror is a very versatile text editor implemented in JavaScript for the browser but in this tutorial, we'll be using CodeMirror to display code example and beautify it by applying language modes and themes.

Let's get Started
First, install the dependency via "npm" or "yarn".
yarn add codemirror

Next, create a new js file and name it "code-mirror.js" inside the resource folder. This will be passed on to Laravel Mix for processing.
# laravel mix

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

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

Initialize CodeMirror Instance
The content of the "js/code-mirror.js" should be the import and initialization for CodeMirror. For this example, we'll be focusing on the PHP modes but if you plan to use it for other programming languages, do check out their other modes available on the documentation. 
/* 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,

Import CodeMirror Style and Theme
It's important that you import the styling to show the CodeMirror editor itself. From your "scss" or "css" file do import as follows. Do note that the theme imported is the "dracula" theme, if you want other themes do check out their docs for the full theme that is provided out of the box.
/* code mirror */
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/dracula.css';

Reference the Script in Blade Layout
Finally reference the script in the blade layout file of your project. Do note that the code source that you want to render can be from any of your Laravel models, for example, Code / Post / Article / Demo model instance. Pass the code instance into the textarea like below and make sure the id is set to "code" since we are using it to initialize the CodeMirror instance.
<textarea id="code">{!! $model->code !!}</textarea>

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

Preview CodeMirror
Below is the preview of the CodeMirror editor on the browser and depending on the theme it will be displayed differently.
CodeMirror PHP Code example in Browser

Extra: Using Highlight.Js
If you are interested in the other approach to highlight codes, you can have a look Using highlight.js on Laravel project.

By now you will have learned how to implement CodeMirror on your website in few simple steps. If you find this tutorial to be helpful do share it with others and cheers 🍻. happy coding!