markugen
Version:
Markdown to HTML/PDF static site generation tool
125 lines (120 loc) • 7.79 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Getting Started</title>
<link rel="stylesheet" href="markugen.css">
</head>
<body>
<h1 id="getting-started">Getting Started</h1>
<p>To get started using Markugen in your project, you will need to first
install Markugen as a dependency. It is likely that you will be generating
your documentation as a build/publish step; therefore, you may want to add
<code>--save-dev</code> to the following commands to add it as a dev dependency.</p>
<h2 id="install-markugen">Install Markugen</h2>
<p>To install Markugen within your NodeJS project, execute one of the following
commands:</p>
<div class="markugen-tabs-container markugen-not-printable">
<div class="markugen-tabs-labels">
<div name="tab-1" class="markugen-tab-label active">npm</div>
<div name="tab-2" class="markugen-tab-label">yarn</div>
<div name="tab-3" class="markugen-tab-label">pnpm</div>
</div>
<div class="markugen-tabs">
<div name="tab-1" class="markugen-tab">
<p><code>npm install markugen</code></p>
</div>
<div name="tab-2" class="markugen-tab markugen-hidden">
<p><code>yarn add markugen</code></p>
</div>
<div name="tab-3" class="markugen-tab markugen-hidden">
<p><code>pnpm add markugen</code></p>
</div>
</div>
</div>
<div name="tab-1" class="markugen-tabs-container markugen-printable">
<div name="tab-1" class="markugen-tab-label">npm</div>
<div name="tab-1" class="markugen-tab">
<p><code>npm install markugen</code></p>
</div>
</div>
<div name="tab-2" class="markugen-tabs-container markugen-printable">
<div name="tab-2" class="markugen-tab-label">yarn</div>
<div name="tab-2" class="markugen-tab">
<p><code>yarn add markugen</code></p>
</div>
</div>
<div name="tab-3" class="markugen-tabs-container markugen-printable">
<div name="tab-3" class="markugen-tab-label">pnpm</div>
<div name="tab-3" class="markugen-tab">
<p><code>pnpm add markugen</code></p>
</div>
</div>
<h2 id="build-your-website">Build Your Website</h2>
<p>This section assumes you already have a markdown file or a set of markdown
files. To generate your website, it is quite simple, just create an
instance of the <code>Markugen</code> class and call <code>generate</code>. The following code
assumes your markdown files are in a directory called <code>markdown</code>. If your
markdown files are in a different folder, just change the <code>input</code> option to
point to the location of the folder containing your markdown files.</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">.ts</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-1', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-1" class="hljs language-ts"><span class="hljs-comment">// import markugen</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Markugen</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'markugen'</span>;
<span class="hljs-comment">// create an instance</span>
<span class="hljs-keyword">const</span> mark = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Markugen</span>();
<span class="hljs-comment">// generate the website</span>
<span class="hljs-keyword">await</span> mark.<span class="hljs-title function_">generate</span>({
<span class="hljs-attr">input</span>: <span class="hljs-string">'markdown'</span>,
});</code></pre>
</div><p>Markugen will output the HTML files to a folder in your current working
directory or <code>cwd</code> called <code>output</code>. If you would like to change the output
location, provide Markugen with the output location via the <code>output</code> option
like so:</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">.ts</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-2', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-2" class="hljs language-ts"><span class="hljs-comment">// import markugen</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Markugen</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'markugen'</span>;
<span class="hljs-comment">// create an instance</span>
<span class="hljs-keyword">const</span> mark = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Markugen</span>();
<span class="hljs-comment">// generate the website</span>
<span class="hljs-keyword">await</span> mark.<span class="hljs-title function_">generate</span>({
<span class="hljs-attr">input</span>: <span class="hljs-string">'markdown'</span>,
<span class="hljs-attr">output</span>: <span class="hljs-string">'docs'</span>,
});</code></pre>
</div><p>That's all folks!</p>
<h1 id="additional-options">Additional Options</h1>
<p>Most of Markugen's options have default values associated with them. As a
matter of fact, the only required option is the <code>input</code> option; all other
options have defaults. A few things to note about the defaults:</p>
<ul>
<li>The file name will be used as the title of each page</li>
<li>The site title will be <code>Markugen v2.0.5</code>
and should be overridden</li>
<li>Page order is defaulted to alphabetical order</li>
</ul>
<div class="markdown-alert markdown-alert-tip">
<p class="markdown-alert-title"><svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</p>
<p>Additional <a class="markugen-md-link" href="./Features/Options.html">options</a> can be found in the
<a class="markugen-md-link" href="./Features.html">Features Section</a> of this documentation. There is also a full
working example provided from start to finish that you can
follow along with found <a class="markugen-md-link" href="./Getting-Started/Example.html">here</a>.</p>
</div>
<script src="markugen.js"></script>
</body>
</html>