Home / Tutorials / How to set up CodeMirror for Laravel project
How to set up CodeMirror for Laravel project cover

How to set up CodeMirror for Laravel project

8 mins


3 years ago



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!
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this