Preface

Emphase is an Open Source project of VivaRado.

Introduction

Emphase is a code highlight library, emphasize your syntax!

Contributors:

• VivaRado [email protected]
• 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