Fool's tutorial: building a Markdown previewer using Vue and Electron

The latest trend that developers must adapt to is to write a code base for multiple operating systems.

Electron is a JavaScript framework that allows you to create desktop applications with simple JavaScript and HTML and convert websites into executable applications, making full use of all the functions of Windows, Mac or Linux operating systems.

Vue is a library designed to build interactive and progressive network applications. It provides data responsive components with simple and flexible API s.

In this tutorial, we will step through how to build a Markdown preview application using Vue and Electron.

premise

To continue this tutorial, you need to have the following conditions:

  • Familiar with HTML, CSS and Javascript (ES6 +)
  • VS Code or any code editor installed on the development computer
  • Vue Basics

What will we build

We will build a desktop application that previews the markdown code. Basically, we'll have a grid with two columns: one for the text editor and the other for the preview.

The results will be as follows:

Set Vue

Create a new Vuejs application using Vue CLI. If Vue CLI is not installed on your development computer, you can install it using the following command:

npm install -g @vue/cli

-The g flag will install it globally on your computer.

Next, create a new Vue application using the CLI, using the vue create command followed by the project name.

The name of our application is markdown viewer, so we can create it by running the following command:

vue create markdown-previewer

Running Vue create markdown viewer will create a new Vue application, but first, you will be prompted with some questions to set up the application.

Step 1

Select the Manually select features function and press Enter, which will enable you to explicitly select the libraries to be included in the new project.

Step 2

To select and control an item on the function list, the mouse cannot work here, so when you want to select / cancel a function, use the arrow to move up and down, and then press the spacebar. Select Router, Babel and Linter.

Step 3

Instead of using history mode, we will use hash mode.

Step 4

Select ESLint + standard config. This is basically the configuration of our linker. ESLint helps you maintain patterns when writing code.

Step 5

Click lint when saving. When you save the code, it will run lint on the code.

Click Lint on save. When you save the code, it will run lint on the code.

Step 6

Select package JSON, where we will store all project dependencies.

Step 7

Enter Y or N, depending on whether you want to save it as a preset, which saves you time to complete all these steps when creating a new Vue application.

Click Enter to start building the new Vue application.

After creating the application, you should see the following on the terminal:

To run the application, move to the project directory and run npm run serve.

cd markdown-previewer
code . && npm run serve

code . The command will open the project in VS Code, but you are welcome to use any code editor you choose.

After compilation, the application will be on the port of the application http://localhost : output on the terminal running on 8080 /.

If accessed on the browser http://localhost : 8080 /, you should see the following.

Now that we have started and run the Vue application, it's time to add the electron builder package.

Add electron builder

The electronic builder package helps you package and build distributable Electron applications for macOS, Windows and Linux, with automatic update support out of the box.

To add this package to your application, use the Vue add command. This cool feature of Vue CLI will automatically configure the package in the application.

To install the package, run the following command

vue add electron-builder

Next, you will be prompted to choose your preferred version. Select the latest version (9.0.0 at the time of writing) and press Enter to continue.

When this command is run, a background. Is created in the src directory JS file. This is the role of Electron. The main process creates a desktop window for the application.

After you install package - Electronic Some new scripts were found in the JSON file:

"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"

Run the application using the electron:serve command.

npm run electron:serve

This will open the Electron application on your desktop.

Install Bootstrap

The next step is to install Bootstrap, which will help you set up the user interface faster.

Use the vue add command to install Bootstrap. Remember that the vue add command will be in main Handle package registration in JS file. To install it, run the following command:

vue add bootstrap-vue bootstrap

The system will ask you if you want to use babel. Enter y and press enter to continue.

Now we can set up the user interface (UI).

Set up user interface

Before setting up the user interface, let's tidy it up.

First, replace the code in components / HelloWorld with the following code.

<template>
  <section>
    <div class="container-fluid">
      <div class="row text-light">
        <div class="col-md-6">
          <h3>Editor</h3>
        </div>
        <div class="col-md-6">
            <h3>Previewer</h3>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: "HelloWorld"
};
</script>

This is the basic grid system in Bootstrap. Due to eslint loader, you should encounter errors. To deactivate it, create a Vue config. JS file and add the following.

module.exports = {
  lintOnSave: false
}

In order for these changes to take effect, you need to restart the server.

Now, let's set up the code editor. To do this, we will use the Ace package.

To install this package, open your terminal and enter the following.

npm install --save-dev vue2-ace-editor

Next, at HelloWorld Define ace package in Vue component.

components: {
    editor: require("vue2-ace-editor")
}

You must also define some states for the editor. For example, you need to define the content state, that is, the storage location of all markdown codes. In addition, you should use the state attribute to define the height of the editor.

data() {
  return {
    content: "",
    height: window.innerHeight - 100
  };
},

Now create a method to introduce all instances of the editor, such as language types, themes, and patterns.

methods: {
  editorInit() {
    editorInit() {
      require("brace/ext/language_tools");
      require("brace/mode/markdown");
      require("brace/theme/dracula");
    }
  }
}

Now you can register components in the templates section.

<editor
   v-model="content"
   ref=""aceeditor""
   @init="editorInit"
   lang=""markdown""
   theme="dracula"
   :height="height"
></editor>

The output shall be as follows:

Our user interface needs more cleaning. Let's delete the Vue logo and add a section for the preview.

To remove the Vue logo, go to views / home Vue file and replace the code with the following.

<template>
  <div>
    <HelloWorld />
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld
  }
};
</script>

We also need to remove the navigation links at the top of the application and change the background color. Open the root app Vue component, and then replace the code with the following.

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<style>
body {
  background: #000000;
}
#app {
  font-family: helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
</style>

The result of the change shall be as follows:

Now we can add our preview section. We will use a card to preview the tag.

In your components / HelloWorld Add a simple card to the template in the Vue file.

<div class="col-md-6">
  <h3>Previewer</h3>
  <div class="card text-left p-2" :style="styleObject">{{content}}</div>
</div>

Then, define a state to hold certain styles of the data.

styleObject: {
  height: window.innerHeight - 100 + "px",
  color: "black",
  overflowY: "auto"
},

Here, we need to add some dynamic styles to div, and the class is card, so that the height will always be consistent with the height of the code editor.

Anything you type in the code editor will be displayed on the preview card.

Implement markdown previewer

You can use the v-html instruction to convert the code base into an HTML previewer.

<div class="card text-left p-2" :style="styleObject" v-html="content"></div>

This converts the code in the editor to HTML.

We will demonstrate how to implement the markdown previewer in two ways: simple and complex.

Complex methods need to write their own custom markdown instructions. The easy way is to simply install a package from your markdown code.

Let's start with a complex approach.

Complex way

We will use regular expressions to set up our own custom Vue instructions for tags, which is a cumbersome process.

First create a direct directory in src, and then create an encode JS file. You will write all markdown configurations here.

Next, register markdown to main JS file.

import decode from '@/directives/decode'
Vue.directive("decode", decode)

Set your markdown code. A custom Vue instruction is encapsulated in the bind() method, and an element is passed as a param.

export default {
  bind: el => {
    console.log(el.innerHTML)
  }
}

Now you can use the v-decode instruction on the template.

<div v-markdown :key="content" class="card text-left p-2" :style="styleObject">{{content}}</div>

Pass the content as a key. Whenever a keyup event appears on the editor, the instruction will record the content on the console.

The next step is to start writing some regular expressions for markdown.

Create a custom rules array to hold all regular expressions. Start with a simple head:

const rules = [
  [/^(?:######)\s*(.+?)[ \t]*$/gm, '<h6>$1</h6>'],
]

This simple rule will ######## convert to HTML elements.

Let's break down what happened here:

  • ^Declare the position of the beginning of the line
  • (?: ########) matches the character #####
  • \s * match space characters
  • (.+?) Matches all characters except the line terminator. An example is the line terminator, which marks the end of the line in the input character sequence
  • [\ t] * is a qualifier that matches between 0 and unlimited, and matches spaces or tabs
  • g returns all matches
  • m make ^ and $match the start / end of each line

Now that we have the regex of the element, we can do the same for other header elements by modifying the expression.

const rules = [
  [/^(?:######)\s*(.+?)[ \t]*$/gm, '<h6>$1</h6>'],
  [/^(?:#####)\s*(.+?)[ \t]*$/gm, '<h5>$1</h5>'],
  [/^(?:####)\s*(.+?)[ \t]*$/gm, '<h4>$1</h4>'],
  [/^(?:###)\s*(.+?)[ \t]*$/gm, '<h3>$1</h3>'],
  [/^(?:##)\s*(.+?)[ \t]*$/gm, '<h2>$1</h2>'],
  [/^(?:#)\s*(.+?)[ \t]*$/gm, '<h1>$1</h1>']
]

Here, we define a regular expression for all header elements. In order to use them, we must loop and replace our custom input with rules that match the expression.

bind(el) {
    let content = el.textContent
    rules.forEach(([rule, template]) => {
      content = content.replace(rule, template);
      console.log(content)
    })
    el.innerHTML = content
  }
}

With this definition, we can use the header element in the editor.

Let's define some other simple rules.

  • List: [/^(?:-)\s*(.+?)[ \t]*$/gm, '<ul><li>$1</li></ul>']
  • Block quotation marks: [/ ^ (?: >) \ s * (. +?) [ \t]*$/gm, ' <blockquote>$1</blockquote>']

Writing all the expressions for our markdown can be confusing and time consuming. But it's always good to understand what's going on behind all the packages. This leads us to a simple way to implement the markdown viewer.

Simple method

The easier way is to install a software package to help you process the data.

We will use Vue directive markdown. To install it, open your terminal and run the following command.

npm install vue-directive-markdown --save-dev 

Next, in main JS file and configure it so that it can be accessed globally in the application.

import VueDirectiveMarkdown from 'vue-directive-markdown'
Vue.directive('decode', VueDirectiveMarkdown)

You can access it by analyzing the v-decode in the template.

<div v-decode :key="content" class="card text-left p-2" :style="styleObject">{{content}}</div>

Finally, pass the content as a key so that it will be updated every time you enter.

last

Knowing how to write custom instructions will really improve your Vue skills. We need to write a code base for the desktop and the Web, which we must all adapt to.

go to GitHub Get the complete source code.

Original text: https://blog.logrocket.com
Author: Wisdom Ekpot

It was launched on the official account front end full stack developer. It reads the latest articles at the first time and gives priority to publishing new articles within two days. After paying attention to the private letter reply: big gift bag, send a network of high-quality video course online disk materials, which will surely save you a lot of money!

Tags: Front-end Vue.js Electron markdown

Posted by newguy45 on Tue, 17 May 2022 14:56:38 +0300