Simple Syntax Highlighter For Vue

Description:

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
</ssh-pre>

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
  </template>
  Code Here
</ssh-pre>

5. Enable the dark mode.

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

6. Make the code box reactive to variable changes.

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

Preview:

Simple Syntax Highlighter For Vue

Changelog:

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: https://antoniandre.github.io/simple-syntax-highlighter/

Download Link: https://github.com/antoniandre/simple-syntax-highlighter/archive/master.zip

Official Website: https://github.com/antoniandre/simple-syntax-highlighter

Install & Download:

# NPM
$ npm i simple-syntax-highlighter --save

You Might Be Interested In:

Add Comment