Vue.js component: Beautiful code highlighter


Login or Register for Dates, Times and to Reply

 
Thread Tools Search this Thread
# 1  
Vue.js component: Beautiful code highlighter

Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads.

Today, I ran across this component, vue-code-highlight

Beautiful code syntax highlighting as Vue.js component.

Image

Usage

Code:
npm install vue-code-highlight --save

We can use this module in two different ways, as a component or as a directive.

Component

Code:
//We have to extract the component from the module
import { component as VueCodeHighlight } from 'vue-code-highlight';

components:{
  VueCodeHighlight,
  ...
}

HTML

Code:
<vue-code-highlight>
 //Paste code and output snippets here
</vue-code-highlight>


Window styles are already present in a component mode, but we will need to select and include a theme to properly highlight code. (See the themes section.)

Directive

In the main file:

Code:
import VueCodeHighlight from 'vue-code-highlight';

Vue.use(VueCodeHighlight) //registers the v-highlight directive

And then in any Vue component:

Code:
<div v-highlight >
 ...
</div>

HTML

All markup under the div element having the following structure will be syntax highlighted.

Code:
<pre class="language-javascript">
  <code>
    //your code goes here
  </code>
</pre>

HTML

To give the highlighter a window look in a directive mode, include the ./node_modules/vue-code-highlight/themes/window.css file somewhere in the app.

Themes

In order to visually highlight code, we need to select a theme from ./node_modules/vue-code-highlight/themes/ and import it somewhere into the component/application.

Reference: vue-code-highlight - npm

GitHub: GitHub - elisiondesign/vue-code-highlight: Beautiful code highlighter as Vue.js component.
# 2  
Also, this is a possibility:

GitHub Highlight.js

Quote:
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.

Reference: Web Page: highlight.js

Image
Login or Register for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

6 More Discussions You Might Find Interesting

1. Web Development

Documenting Installation Problem with vue-beautiful-chat

REF: https://github.com/mattmezza/vue-beautiful-chat $ git clone https://github.com/mattmezza/vue-beautiful-chat.git Cloning into 'vue-beautiful-chat'... remote: Enumerating objects: 534, done. remote: Total 534 (delta 0), reused 0 (delta 0), pack-reused 534 Receiving objects: 100%... (2 Replies)
Discussion started by: Neo
2 Replies

2. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Turning jQuery Code into Vue.js

The following is some code I am working on the replace our navbar (someday) with a Vue component. Vue.component("unix-navbar", { template: `<div class="neo-table-border vuenavbar"><div class="flex-item" style="margin-bottom:10px;padding-top:13px;"><a class="vuenavbarhome"... (19 Replies)
Discussion started by: Neo
19 Replies

5. Web Development

A simple UNIXtime component in Vue.js

A shout out to Scott who gave me a helping hand to turn a simple sample Vue.js app I wrote yesterday into a Vue.js component: Vue.component("unix-time", { template: `<div class="time">{{unixtime}}</div>`, data() { return { unixtime: "" }; }, methods: { ... (1 Reply)
Discussion started by: Neo
1 Replies

6. Shell Programming and Scripting

like to share this beautiful shell script

Hello Everybody I recently got this beautiful shell script from my friend. I like to share it with every body as I am bit new to shell scripting enviorment. I hope people in this site will like it. It is related to checking the filesystem threshold limit. After getting threshold limit of... (0 Replies)
Discussion started by: girish.batra
0 Replies

Featured Tech Videos