markugen
Version:
Markdown to HTML/PDF static site generation tool
205 lines (202 loc) • 14.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Options</title>
<link rel="stylesheet" href="../markugen.css">
</head>
<body>
<h1 id="options">Options</h1>
<p>Markugen comes with a set of options that can be provided when constructing
a new instance of Markugen. The following output shows all the available
options:</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">markugenoptions.ts</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-15', 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 title="Save to markugenoptions.ts" class="markugen-code-save" onclick="markugen.saveToFile('copy-save-15', 'markugenoptions.ts', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-15" class="hljs language-ts">
<span class="hljs-comment">/**
* Markugen configuration options
*/</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MarkugenOptions</span>
{
<span class="hljs-comment">/**
* The path to the Chrome or Firefox executable. This is only required if {<span class="hljs-doctag">@link</span> pdf}
* is true and Markugen is unable to locate the executable.
*/</span>
<span class="hljs-attr">browser</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Be very careful with this option as it turns off the use of a sandbox
* when running chrome. This should only be necessary when running in a
* container. [default: true]
*/</span>
<span class="hljs-attr">sandbox</span>?:<span class="hljs-built_in">boolean</span>,
<span class="hljs-comment">/**
* If true, console output will be colored, else it will not
*/</span>
<span class="hljs-attr">color</span>?:<span class="hljs-built_in">boolean</span>,
<span class="hljs-comment">/**
* If true, markugen will silence its output
*/</span>
<span class="hljs-attr">quiet</span>?:<span class="hljs-built_in">boolean</span>,
<span class="hljs-comment">/**
* Used internally to show full call stacks when an uncaught exception occurs
*/</span>
<span class="hljs-attr">debug</span>?:<span class="hljs-built_in">boolean</span>,
<span class="hljs-comment">/**
* Used internally to tell Markugen if it was executed from the cli or not
*/</span>
<span class="hljs-attr">cli</span>?:<span class="hljs-built_in">boolean</span>,
}
</code></pre>
</div><h2 id="themes">Themes</h2>
<p>The theme options give the developer the opportunity to provide a set of
colors and fonts for <code>light</code> and <code>dark</code> mode. Any values that are not provided
will be set to the default Markugen colors and fonts. The values for each of
the theme options are strings and should be valid CSS values for colors or
fonts.</p>
<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>If you would like to override styles other than the theme, please refer to
the section on <a class="markugen-md-link" href="./Styles.html">styles</a>.</p>
</div>
<p>The following output shows the available theme settings that can be
supplied as options to Markugen:</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">theme.ts</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-16', 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 title="Save to theme.ts" class="markugen-code-save" onclick="markugen.saveToFile('copy-save-16', 'theme.ts', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-16" class="hljs language-ts"><span class="hljs-comment">/**
* Theme options
*/</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">Theme</span>
{
<span class="hljs-comment">/**
* Primary text color
*/</span>
<span class="hljs-attr">color</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Secondary text color used on backgrounds
*/</span>
<span class="hljs-attr">colorSecondary</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Primary background color
*/</span>
<span class="hljs-attr">bgColor</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Secondary background color
*/</span>
<span class="hljs-attr">bgColorSecondary</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Primary color for borders
*/</span>
<span class="hljs-attr">borderColor</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Secondary color for borders
*/</span>
<span class="hljs-attr">borderColorSecondary</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Accent color used on links and alike
*/</span>
<span class="hljs-attr">accentColor</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Font family used for the sites text
*/</span>
<span class="hljs-attr">fontFamily</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Font family used for the title/heading text
*/</span>
<span class="hljs-attr">fontFamilyHeaders</span>?:<span class="hljs-built_in">string</span>,
<span class="hljs-comment">/**
* Maximum height of code blocks
*/</span>
<span class="hljs-attr">codeMaxHeight</span>?:<span class="hljs-built_in">string</span>,
}</code></pre>
</div><p>By default, Markugen provides a set of styles for each theme. The following
output shows the default values used by Markugen when not overridden:</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">themes.ts</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-17', 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 title="Save to themes.ts" class="markugen-code-save" onclick="markugen.saveToFile('copy-save-17', 'themes.ts', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-17" class="hljs language-ts"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Theme</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./theme'</span>;
<span class="hljs-keyword">export</span> { <span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">Theme</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'./theme'</span>;
<span class="hljs-comment">/**
* Light and dark themes
*/</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">Themes</span>
{
<span class="hljs-comment">/**
* Theme used for light mode
*/</span>
<span class="hljs-attr">light</span>?:<span class="hljs-title class_">Theme</span>,
<span class="hljs-comment">/**
* Theme used for dark mode
*/</span>
<span class="hljs-attr">dark</span>?:<span class="hljs-title class_">Theme</span>,
}
<span class="hljs-comment">/**
* The default light and dark themes used by Markugen
*/</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">defaultThemes</span>:<span class="hljs-title class_">Themes</span> = {
<span class="hljs-attr">light</span>: {
<span class="hljs-attr">color</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">colorSecondary</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">'white'</span>,
<span class="hljs-attr">bgColorSecondary</span>: <span class="hljs-string">'#e5e4e2'</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#c0c0c0'</span>,
<span class="hljs-attr">borderColorSecondary</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">accentColor</span>: <span class="hljs-string">'#1f6feb'</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif'</span>,
<span class="hljs-attr">fontFamilyHeaders</span>: <span class="hljs-string">'Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif'</span>,
<span class="hljs-attr">codeMaxHeight</span>: <span class="hljs-string">'500px'</span>,
},
<span class="hljs-attr">dark</span>: {
<span class="hljs-attr">color</span>: <span class="hljs-string">'white'</span>,
<span class="hljs-attr">colorSecondary</span>: <span class="hljs-string">'silver'</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">'#423f3e'</span>,
<span class="hljs-attr">bgColorSecondary</span>: <span class="hljs-string">'#2b2b2b'</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#404040'</span>,
<span class="hljs-attr">borderColorSecondary</span>: <span class="hljs-string">'silver'</span>,
<span class="hljs-attr">accentColor</span>: <span class="hljs-string">'#a371f7'</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif'</span>,
<span class="hljs-attr">fontFamilyHeaders</span>: <span class="hljs-string">'Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif'</span>,
<span class="hljs-attr">codeMaxHeight</span>: <span class="hljs-string">'500px'</span>,
}
};</code></pre>
</div><p>The default colors used when no theme options are provided can be seen on this
website. Additionally, you are welcome to view the generated CSS file
<a href="../markugen.css">here</a>.</p>
<script src="../markugen.js"></script>
</body>
</html>