Preface

Emphase is an Open Source project of VivaRado.

Screenshot

Introduction

Emphase is a code highlight library, emphasize your syntax!

Contributors:


Introduction / Profile


Introduction / Project Overview


Design

Emphase is a Javascript code highlight script aiming to be small but legible and extendable.

It consists of the LanguageLoader, a CacheManager and an Elementmaker and Utils.


Design / LanguageLoader

The LanguageLoader is responsible for loading the languages on the client or server and caching them for later use.


Design / CacheManager

The CacheManager is responsible for locating the keywords and other details provided in the language files, replacing them with temporary hashes and storing the formatted HTML for later replacement.


Design / ElementMaker

The ElementMaker is for creating the various HTML elements needed to display Emphase code blocks on the page.


Production

To work on extending this module a few thigs are provided:

Run in browser with reload allong with gulp watch:

npm run dev


Just build with gulp

npm run build

Work is done on the ES files. Gulp is structured to take these ES contents of src/es/* convert them to CJS and then broswerify them and put them to lib.


Installation

To install:

npm install emphase


On the client side, wether you want to use the library headless or acting on an element, you will need to include:


the CSS:

<link href="../lib/em.css" rel="stylesheet" type="text/css">


the Javascript:

<script src="../lib/em.js" type="text/javascript"></script>

Common JS (CJS)

<script src="../src/em.es.js" type="module"></script>

ES (ECMAScript module)


and the language file(s) you will need:

<script src="../src/languages/em_bash.js" type="text/javascript"></script>

Usage

Emphase comes in common and module flavor. After installation you can use Emphase on an element using the emphasize function with the language you need included with a script tag, or headless by providing some code (string) and the language (string) parameters.

Usage Scenarios:

You do not need to include the language if you are using emphase on the server side.


Usage / ES Element:

Element:

<code class="lang-bash">
#!/bin/bash

if [ $a  -eq  true ]
then
  echo "A 'a'"
else
  echo "B 'b'"
fi
'</code>

Language Include:

<script src="./src/languages/em_bash.js" type="text/javascript"></script>  

Script:

import {Emphase} from 'Emphase';
var em = new emphase();

console.log( em.emphasize(document.querySelector(".lang-bash"), 'bash').result );

Usage / CJS Element:

Element:

<code class="lang-bash">
#!/bin/bash

if [ $a  -eq  true ]
then
  echo "A 'a'"
else
  echo "B 'b'"
fi
'</code>

Language Include:

<script src="./src/languages/em_bash.js" type="text/javascript"></script>  

Script:

const emphase = require("emphase");
var em = new emphase();

console.log( em.emphasize(document.querySelector(".lang-bash"), 'bash').result );

Usage / ES Headless:

import {Emphase} from 'Emphase';
var em = new emphase();

string = `
#!/bin/bash

if [ $a  -eq  true ]
then
  echo "A 'a'"
else
  echo "B 'b'"
fi
`;

console.log( em.emphasize(string, 'bash').result );

Usage / CJS Headless:

const emphase = require("emphase");
var em = new emphase();

string = `
#!/bin/bash

if [ $a  -eq  true ]
then
  echo "A 'a'"
else
  echo "B 'b'"
fi
`;

console.log( em.emphasize(string, 'bash').result );

Features


Features / User Interface

Overfading Numbers Tab

Screenshot


Features / Syntax Support

Support Syntax:


Current Language Support:

Name Friendly Name Comments Comment Blocks Strings String Blocks Keywords Values Directives
bash Bash True True True False True True True
c C True True True True True True True
cpp C++ True True True True True True True
cs C# True True True False True True True
fs F# True True True False True True False
go Go True True True True True True True
html HTML True True True False True False False
java Java True True True True True True True
javascript JavaScript True True True True True True True
kotlin Kotlin True True True True True True True
matlab Matlab True True True False True True False
perl Perl True False True True True True False
python Python True True True True True True True
r R True False True False True True False
ruby Ruby True True True False True True False
rust Rust True True True False True True False
scala Scala True True True False True True False
sql SQL True True True False True False False
swift Swift True True True False True True False
typescript TypeScript True True True False True True False
vb Visual Basic True True True False True True False

Glossary

Emphase: [em-fuh-see].


Reference

Language Keywords from jsyntax