emphase

Preface

Emphase is an Open Source project of VivaRado.

Introduction

Emphase is a code highlight library, emphasize your syntax!

Contributors:

• VivaRado [e-mail]
• Andreas Kalpakidis
• Madina Akhmatova

---

Profile

_{Introduction / Profile}

• Company: VivaRado LLP
• Designer: Andreas Kalpakidis
• Twitter: @vivarado
• OpenSea: @vivarado

---

Project Overview

_{Introduction / Project Overview}

• Project Name: Emphase
• Code Name: EM
• Proposal Date: 25/12/2023

---

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.

---

LanguageLoader

_{Design / LanguageLoader}

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

---

CacheManager

_{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.

---

ElementMaker

_{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 things 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:

• ES (ECMAScript module):
  • Element (client-side)
  • Headless (server-side or client-side)
• Common JS (CJS):
  • Element (client-side)
  • Headless (server-side or client-side)

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

---

ES Element:

_{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 );

---

CJS Element:

_{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 );

---

ES Headless:

_{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 );

---

CJS Headless:

_{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

• Modern interface.
• Extensive and Deep Language Coverage.
• Light and Dark Theme.
• Client and Server Side.
• ~350 lines of code uncompressed.

---

User Interface

_{Features / User Interface}

Overfading Numbers Tab

---

Syntax Support

_{Features / Syntax Support}

Support Syntax:

• Keywords
• Values
• Directives
• Comments
• Comment Blocks
• Strings
• String Blocks

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

---