Posts Learn Components new Snippets new Categories Tags About Device Beast sponsor
/

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

4 months ago

8 mins read

353 views

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!

Load comments for How to set up CodeMirror for Laravel project

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components