## **Introduction**
Emphase is a code highlight library, emphasize your syntax!
#### Contributors:
* VivaRado
* Andreas Kalpakidis
* Madina Akhmatova
---
### **Profile**
Introduction / Profile
* Company: VivaRado LLP
* Designer: Andreas Kalpakidis
* Twitter: [@vivarado](https://twitter.com/VivaRado)
* OpenSea: [@vivarado](https://opensea.io/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**:
```html
```
the **Javascript**:
```html
```
*Common JS (CJS)*
```html
```
*ES (ECMAScript module)*
and the **language file**(s) you will need:
```html
```
---
### **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:
```html
#!/bin/bash
if [ $a -eq true ]
then
echo "A 'a'"
else
echo "B 'b'"
fi
'
```
#### Language Include:
```html
```
#### Script:
```javascript
import {Emphase} from 'Emphase';
var em = new emphase();
console.log( em.emphasize(document.querySelector(".lang-bash"), 'bash').result );
```
---
### **CJS Element**:
Usage / CJS Element
#### Element:
```html
#!/bin/bash
if [ $a -eq true ]
then
echo "A 'a'"
else
echo "B 'b'"
fi
'
```
#### Language Include:
```html
```
#### Script:
```javascript
const emphase = require("emphase");
var em = new emphase();
console.log( em.emphasize(document.querySelector(".lang-bash"), 'bash').result );
```
---
### **ES Headless**:
Usage / ES Headless
```javascript
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
```javascript
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.
---
### **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].