How to set up CodeMirror for Laravel project
Tags: laravel, laravelcodemirror, laravelphp
Published: 2021-10-28 14:27:04

---
title: How to set up CodeMirror for Laravel project
published: true
date: 2021-10-28 2:00:00 UTC
tags: laravel,laravelcodemirror,laravelphp
canonical_url: https://postsrc.com/posts/how-to-set-up-codemirror-for-laravel-project
---

[This post was originally published at PostSrc 🔥🔥🔥](https://postsrc.com/). If you like this kind of tutorial, I would really appreciate it if you give it a visit.

In this post, you'll be learning to set up [CodeMirror](https://codemirror.net/) 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](https://codemirror.net/mode/index.html) and [themes](https://codemirror.net/doc/manual.html#styling).  
  
**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.  

[![](https://postsrc.com/storage/8HqkIykN5oiUGhel4qylG7Y0ZkwcE1HyJsxVGVVK.png)<figcaption>CodeMirror PHP Code example in Browser</figcaption>](https://postsrc.com/storage/8HqkIykN5oiUGhel4qylG7Y0ZkwcE1HyJsxVGVVK.png)

  
**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_](https://postsrc.com/posts/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!