hlme v1.1.0

highlightme

highlightme is a simple snytax highlighter for your web pages!...

Getting the library

Fetch via CDN

jsDelivr

Common JS

• Minified (Recommended)

<script src="https://cdn.jsdelivr.net/gh/amritbera27/highlightme@1.1.0/cdn/highlightme.min.js"></script>

• Normal

<script src="https://cdn.jsdelivr.net/gh/amritbera27/highlightme@1.1.0/cdn/highlightme.js"></script>

NPM Package

npm i hlme

Usage

In the browser

Using HTML classes

For example:

<div class="hlme-html">...</div>

View the below table to know about the supported languages and their class name.

To enable dark mode just add -dark after the class name. For example:

<div class="hlme-html-dark">...</div>

Using JavaScript Function highlightme()

The glimpse of the function...

highlightme(id, language, mode)

This will only highlight the id defined, in short this will highlight separately.

1. ID

This contains either the ID of the div, pre, etc. or the document selector. For example:

// Using ID
highlightme("yourId", "html");

// Using document selector
highlightme(document.querySelector("#yourId"), "html");
highlightme(document.getElementById("yourId"), "html");

2. Language

This contains the language you want to highlight. For example:

highlightme("yourId", " html");
// or
highlightme("yourId", "xml");

View the table to know about supported languages and their string.

Note: If you don't define your language it will define the language as HTML.

3. Mode (Light / Dark)

//Darkmode
highlightme("yourId", "html", " dark");

//Lightmode
highlightme("yourId", "html");
highlightme("yourId", "html", "light")

Pro Tip: Always try to define everything in the function to avoid errors.

Node.js server

Using HTML classes

First import the library and add highlightmeAll() function.

const hlme = require('highlightme');
hlme.highlightmeAll();

highlightmeAll() will find the classes and highlight them.

For example:

<div class="hlme-html">...</div>

View the below table to know about the supported languages and their class name.

To enable dark mode just add -dark after the class name. For example:

<div class="hlme-html-dark">...</div>

Using function highlightme()

First and the main thing is to import the library.

const hlme = require('highlightme');

The glimpse of the function...

hlme.highlightme(id, language, mode)

This will only highlight the id defined, in short this will highlight separately.

1. ID

This contains either the ID of the div, pre, etc. or the document selector. For example:

// Using ID
hlme.highlightme("yourId", "html");

// Using document selector
hlme.highlightme(document.querySelector("#yourId"), "html");
hlme.highlightme(document.getElementById("yourId"), "html");

2. Language

This contains the language you want to highlight. For example:

hlme.highlightme("yourId", " html");
// or
hlme.highlightme("yourId", "xml");

View the table to know about supported languages and their string.

Note: If you don't define your language it will define the language as HTML.

3. Mode (Light / Dark)

//Darkmode
hlme.highlightme("yourId", "html", " dark");

//Lightmode
hlme.highlightme("yourId", "html");
hlme.highlightme("yourId", "html", "light")

Pro Tip: Always try to define everything in the function to avoid errors.