emphase
Version:
Emphasize your syntax!
524 lines (512 loc) • 17.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>VRD | emphase | 0.0.1 | 2024/02/15</title>
<link rel="icon" href="assets/media/thumb.ico">
<link rel="stylesheet" type="text/css" href="assets/css/fface.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/code_native.css">
<script type="text/javascript" src="assets/js/mermaid.js"></script>
<script type="text/javascript" src="assets/js/jq.js"></script>
<script type="text/javascript" src="assets/js/webfont.js"></script>
<script type="text/javascript" src="assets/js/snap.svg-min.js"></script>
<script type="text/javascript" src="assets/js/raphael.min.js"></script>
<script type="text/javascript" src="assets/js/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/sequence-diagram.js"></script>
<script type="text/javascript" src="assets/js/flowchart.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</head>
<body class="markdown">
<article class="markdown-body" id="body"><div data-language="en"><h2><strong>Preface</strong></h2>
<p><strong>Emphase</strong> is an Open Source project of <strong>VivaRado</strong>.</p>
<div class="header_logo">
<p><img alt="Screenshot" src="assets/media/EM_logo.svg"/></p>
</div>
<div class="header_preview">
<p><img alt="Screenshot" src="assets/media/emphase_example_js_b.svg"/></p>
</div>
<div class="sidebar">
<h3><strong>Contents</strong></h3>
<ol>
<li><strong>Preface</strong></li>
<li><strong>Introduction</strong>
<ol>
<li><strong>Profile</strong></li>
<li><strong>Project Overview</strong></li>
</ol></li>
<li><strong>Design</strong>
<ol>
<li><strong>LanguageLoader</strong></li>
<li><strong>CacheManager</strong></li>
<li><strong>ElementMaker</strong></li>
</ol></li>
<li><strong>Production</strong></li>
<li><strong>Installation</strong></li>
<li><strong>Usage</strong>
<ol>
<li><strong>ES Element</strong></li>
<li><strong>CJS Element</strong></li>
<li><strong>ES Headless</strong></li>
<li><strong>CJS Headless</strong></li>
</ol></li>
<li><strong>Features</strong>
<ol>
<li><strong>User Interface</strong></li>
<li><strong>Syntax Support</strong></li>
</ol></li>
</ol>
<h3>Glossary</h3>
<ol>
<li><strong>Glossary</strong></li>
</ol>
<h3>Reference</h3>
<ol>
<li><strong>Reference</strong></li>
</ol>
</div>
<h2><strong>Introduction</strong></h2>
<p>Emphase is a code highlight library, emphasize your syntax!</p>
<h4>Contributors:</h4>
<ul>
<li>VivaRado <a href="mailto:support@vivarado.com" rel="noopener" target="_blank">support@vivarado.com</a></li>
<li>Andreas Kalpakidis</li>
<li>Madina Akhmatova</li>
</ul>
<hr/>
<h3><strong>Introduction / Profile</strong></h3>
<ul>
<li>Company: VivaRado LLP</li>
<li>Designer: Andreas Kalpakidis</li>
<li>Twitter: <a href="https://twitter.com/VivaRado" rel="noopener" target="_blank">@vivarado</a></li>
<li>OpenSea: <a href="https://opensea.io/vivarado" rel="noopener" target="_blank">@vivarado</a></li>
</ul>
<hr/>
<h3><strong>Introduction / Project Overview</strong></h3>
<ul>
<li>Project Name: Emphase</li>
<li>Code Name: EM</li>
<li>Proposal Date: 25/12/2023</li>
</ul>
<hr/>
<h3><strong>Design</strong></h3>
<p>Emphase is a Javascript code highlight script aiming to be small but legible and extendable.</p>
<p>It consists of the <strong>LanguageLoader</strong>, a <strong>CacheManager</strong> and an <strong>Elementmaker</strong> and <strong>Utils</strong>.</p>
<hr/>
<h3><strong>Design / LanguageLoader</strong></h3>
<p>The <strong>LanguageLoader</strong> is responsible for loading the languages on the client or server and caching them for later use.</p>
<hr/>
<h3><strong>Design / CacheManager</strong></h3>
<p>The <strong>CacheManager</strong> 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.</p>
<hr/>
<h3><strong>Design / ElementMaker</strong></h3>
<p>The <strong>ElementMaker</strong> is for creating the various HTML elements needed to display Emphase code blocks on the page.</p>
<hr/>
<h3><strong>Production</strong></h3>
<p>To work on extending this module a few things are provided:</p>
<p>Run in browser with reload allong with gulp watch:</p>
<pre><code>npm run dev
</code></pre>
<p><br/></p>
<p>Just build with gulp</p>
<pre><code>npm run build
</code></pre>
<p>Work is done on the ES files. Gulp is structured to take these ES contents of <code>src/es/*</code> convert them to CJS and then broswerify them and put them to <code>lib</code>.</p>
<hr/>
<h3><strong>Installation</strong></h3>
<p>To install:</p>
<pre><code>npm install emphase
</code></pre>
<p><br/></p>
<p>On the client side, wether you want to use the library headless or acting on an element, you will need to include:</p>
<p><br/></p>
<p>the <strong>CSS</strong>:</p>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"../lib/em.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span><span class="p">></span>
</code></pre>
<p><br/></p>
<p>the <strong>Javascript</strong>:</p>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"../lib/em.js"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</code></pre>
<p><small><em>Common JS (CJS)</em></small></p>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"../src/em.es.js"</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</code></pre>
<p><small><em>ES (ECMAScript module)</em></small></p>
<p><br/></p>
<p>and the <strong>language file</strong>(s) you will need:</p>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"../src/languages/em_bash.js"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</code></pre>
<hr/>
<h3><strong>Usage</strong></h3>
<p>Emphase comes in common and module flavor. After installation you can use Emphase on an element using the <strong>emphasize</strong> function with the language you need included with a script tag, or headless by providing some <strong>code</strong> (string) and the <strong>language</strong> (string) parameters.</p>
<p>Usage Scenarios:</p>
<ul>
<li>ES (ECMAScript module):
<ul>
<li>Element (client-side)</li>
<li>Headless (server-side or client-side)</li>
</ul></li>
<li>Common JS (CJS):
<ul>
<li>Element (client-side)</li>
<li>Headless (server-side or client-side)</li>
</ul></li>
</ul>
<p><em>You do not need to include the language if you are using emphase on the server side.</em></p>
<hr/>
<h3><strong>Usage / ES Element</strong>:</h3>
<h4>Element:</h4>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">code</span> <span class="na">class</span><span class="o">=</span><span class="s">"lang-bash"</span><span class="p">></span>
#!/bin/bash
if [ $a -eq true ]
then
echo "A 'a'"
else
echo "B 'b'"
fi
'<span class="p"></</span><span class="nt">code</span><span class="p">></span>
</code></pre>
<h4>Language Include:</h4>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"./src/languages/em_bash.js"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</code></pre>
<h4>Script:</h4>
<pre><span></span><code class="codehilite javascript"><span class="kr">import</span> <span class="p">{</span><span class="nx">Emphase</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">'Emphase'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">em</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">emphase</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">em</span><span class="p">.</span><span class="nx">emphasize</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".lang-bash"</span><span class="p">),</span> <span class="s1">'bash'</span><span class="p">).</span><span class="nx">result</span> <span class="p">);</span>
</code></pre>
<hr/>
<h3><strong>Usage / CJS Element</strong>:</h3>
<h4>Element:</h4>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">code</span> <span class="na">class</span><span class="o">=</span><span class="s">"lang-bash"</span><span class="p">></span>
#!/bin/bash
if [ $a -eq true ]
then
echo "A 'a'"
else
echo "B 'b'"
fi
'<span class="p"></</span><span class="nt">code</span><span class="p">></span>
</code></pre>
<h4>Language Include:</h4>
<pre><span></span><code class="codehilite html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"./src/languages/em_bash.js"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</code></pre>
<h4>Script:</h4>
<pre><span></span><code class="codehilite javascript"><span class="kr">const</span> <span class="nx">emphase</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"emphase"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">em</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">emphase</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">em</span><span class="p">.</span><span class="nx">emphasize</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".lang-bash"</span><span class="p">),</span> <span class="s1">'bash'</span><span class="p">).</span><span class="nx">result</span> <span class="p">);</span>
</code></pre>
<hr/>
<h3><strong>Usage / ES Headless</strong>:</h3>
<pre><span></span><code class="codehilite javascript"><span class="kr">import</span> <span class="p">{</span><span class="nx">Emphase</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">'Emphase'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">em</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">emphase</span><span class="p">();</span>
<span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span>
<span class="sb">#!/bin/bash</span>
<span class="sb">if [ $a -eq true ]</span>
<span class="sb">then</span>
<span class="sb"> echo "A 'a'"</span>
<span class="sb">else</span>
<span class="sb"> echo "B 'b'"</span>
<span class="sb">fi</span>
<span class="sb">`</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">em</span><span class="p">.</span><span class="nx">emphasize</span><span class="p">(</span><span class="nx">string</span><span class="p">,</span> <span class="s1">'bash'</span><span class="p">).</span><span class="nx">result</span> <span class="p">);</span>
</code></pre>
<hr/>
<h3><strong>Usage / CJS Headless</strong>:</h3>
<pre><span></span><code class="codehilite javascript"><span class="kr">const</span> <span class="nx">emphase</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"emphase"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">em</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">emphase</span><span class="p">();</span>
<span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span>
<span class="sb">#!/bin/bash</span>
<span class="sb">if [ $a -eq true ]</span>
<span class="sb">then</span>
<span class="sb"> echo "A 'a'"</span>
<span class="sb">else</span>
<span class="sb"> echo "B 'b'"</span>
<span class="sb">fi</span>
<span class="sb">`</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">em</span><span class="p">.</span><span class="nx">emphasize</span><span class="p">(</span><span class="nx">string</span><span class="p">,</span> <span class="s1">'bash'</span><span class="p">).</span><span class="nx">result</span> <span class="p">);</span>
</code></pre>
<hr/>
<h3><strong>Features</strong></h3>
<ul>
<li>Modern interface.</li>
<li>Extensive and Deep Language Coverage.</li>
<li>Light and Dark Theme.</li>
<li>Client and Server Side.</li>
<li>~350 lines of code uncompressed.</li>
</ul>
<hr/>
<h3><strong>Features / User Interface</strong></h3>
<p><strong>Overfading Numbers Tab</strong></p>
<p><img alt="Screenshot" src="assets/media/em_overflow_numtab.gif"/></p>
<hr/>
<h3><strong>Features / Syntax Support</strong></h3>
<p><strong>Support Syntax:</strong></p>
<ul>
<li>Keywords</li>
<li>Values</li>
<li>Directives</li>
<li>Comments</li>
<li>Comment Blocks</li>
<li>Strings</li>
<li>String Blocks</li>
</ul>
<p><br/></p>
<p><strong>Current Language Support</strong>:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Friendly Name</th>
<th>Comments</th>
<th>Comment Blocks</th>
<th>Strings</th>
<th>String Blocks</th>
<th>Keywords</th>
<th>Values</th>
<th>Directives</th>
</tr>
</thead>
<tbody>
<tr>
<td>bash</td>
<td>Bash</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>c</td>
<td>C</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>cpp</td>
<td>C++</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>cs</td>
<td>C#</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>fs</td>
<td>F#</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>go</td>
<td>Go</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>html</td>
<td>HTML</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>False</td>
<td>False</td>
</tr>
<tr>
<td>java</td>
<td>Java</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>javascript</td>
<td>JavaScript</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>kotlin</td>
<td>Kotlin</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>matlab</td>
<td>Matlab</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>perl</td>
<td>Perl</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>python</td>
<td>Python</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>r</td>
<td>R</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>ruby</td>
<td>Ruby</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>rust</td>
<td>Rust</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>scala</td>
<td>Scala</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>sql</td>
<td>SQL</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>False</td>
<td>False</td>
</tr>
<tr>
<td>swift</td>
<td>Swift</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>typescript</td>
<td>TypeScript</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>vb</td>
<td>Visual Basic</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>False</td>
<td>True</td>
<td>True</td>
<td>False</td>
</tr>
</tbody>
</table>
<hr/>
<h3><strong>Glossary</strong></h3>
<p><strong>Emphase</strong>: [em-fuh-see].</p>
<hr/>
<h3><strong>Reference</strong></h3>
<p>Language Keywords from <a href="https://www.npmjs.com/package/jsyntax.js" rel="noopener" target="_blank">jsyntax</a></p>
<hr/>
</div></article>
</body>
</html>