Vue.js component: Beautiful code highlighter


Login or Register 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 to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Documenting Installation Problem with vue-beautiful-chat
Neo
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%...... Web Development
2
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Neo
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: ...... Web Development
0
Web Development
Turning jQuery Code into Vue.js
Neo
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"...... Web Development
19
Web Development
A simple UNIXtime component in Vue.js
Neo
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: { ...... Web Development
1
Web Development
UNIX and Linux

Unix (trademarked as the UNIX certification mark) is a very mature family of multitasking, multiuser computer operating systems that evolved from the original AT&T Unix. Unix development starting in the 1970s by legendary Bell Labs programmers Ken Thompson, Dennis Ritchie, and others. Unix was first targeted for the Bell System and AT&T licensed Unix to outside parties. In the 1970s time period, this lead to a variety of for-profit as well as not-for-profit Unix variants.
In the early days, this included the University of California, Berkeley (BSD), Microsoft (Xenix), IBM (AIX), and Sun Microsystems (Solaris). In the early 1990s, AT&T sold their Unix rights to Novell. In 1995 Novell sold their Unix business to the Santa Cruz Operation (SCO). The UNIX trademark was passed to The Open Group, a "neutral" industry consortium. The Open Group promoted the use of the UNIX trademark for certified operating systems that comply with the Single UNIX Specification (SUS). In 2014 Apple's macOS became the Unix version with the largest global install base and macOS remains the largest Unix-user base today.
Linux is a family of open source Unix-like operating systems based on the Linux kernel. The Linux kernel is an operating system kernel first released by Linus Torvalds on 17 September 1991. Linux distributions include the Linux kernel, system software and libraries. Popular free open source Linux distributions include Debian, Fedora, and Ubuntu. Commercial Linux distributions include Red Hat Enterprise Linux and SUSE Linux Enterprise Server. Linux may be freely modified and redistributed. Anyone on the planet may create a Linux distribution for any purpose.
Please enjoy and help our forum community by "showing your work" and posting your code, even when your code is not working as expected. To help others help you, please wrap your code blocks, sample input, sample output, error messages, and other data in CODE tags and wrap your short commands and short data objects in ICODE tags. We were all beginners in the beginning. If you have any questions about how to register or how to post, please contact us in Live Chat. Thank you and enjoy this "forever free" technical support community for UNIX, Linux and computer information technology in general.