Simple Syntax Highlighter For Vue


A simple yet customizable syntax highlighter with code copy functionality for Vue.js developers.

Supported languages:

  • XML
  • HTML
  • HTML Vue JS Template
  • Pug
  • Javascript
  • JSON
  • CSS
  • PHP
  • MySQL

Basic Usage:

1. Import the Simple Syntax Highlighter.

import SshPre from 'simple-syntax-highlighter'
import 'simple-syntax-highlighter/dist/sshpre.css'

2. Register the component.

export default {
  components: { SshPre }

3. Wrap your code snippets into the ssh-pre component and determine the language in the language as follows:

<ssh-pre language="js" label="Javascript">
  Code Here

4. Show a copy button inside the code box.

<ssh-pre language="javascript" copy-button @copied="onCopiedDoSomething">
  <template v-slot:copy-button>
    Copy Button Here
  Code Here

5. Enable the dark mode.

<ssh-pre language="js" dark label="Javascript">
  Code Here

6. Make the code box reactive to variable changes.

<ssh-pre language="js" reactive label="Javascript">
  Code Here


Simple Syntax Highlighter For Vue


v1.4.10 (10/11/2021)

  • Cleanup.

v1.4.9 (09/25/2021)

  • Add CSS3 variables.

v1.4.8 (06/25/2021)

  • Update

v1.4.7 (06/06/2021)

  • Update

v1.4.6 (05/13/2021)

  • Update

v1.4.5 (04/24/2021)

  • Improve global layout.

v1.4.4 (10/20/2020)

  • Update

v1.4.3 (10/04/2020)

  • Remove the data-label attribute if no label.

Download Details:

Author: antoniandre

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i simple-syntax-highlighter --save

You Might Be Interested In:

Add Comment