nml/readme/Code.html
2024-11-03 14:12:43 +01:00

1 line
No EOL
12 KiB
HTML

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>NML | Code</title><link rel="stylesheet" href="../style.css"></head><body><div class="layout"><input id="navbar-checkbox" class="toggle" type="checkbox" style="display:none" checked><div id="navbar"><ul><li class="navbar-entry"><a href="Getting Started.html">Getting Started</a></li><li class="navbar-entry"><a href="Sections.html">Sections</a></li><li class="navbar-entry"><a href="Variables.html">Variables</a></li><li class="navbar-entry"><a href="References.html">References</a></li><li class="navbar-entry"><a href="Imports.html">Imports</a></li><li class="navbar-entry"><a href="Raw.html">Raw</a></li><li class="navbar-entry"><a href="Comments.html">Comments</a></li><li><details><summary class="navbar-category">External Tools</summary><ul><li class="navbar-entry"><a href="Graphviz.html">Graphviz</a></li><li class="navbar-entry"><a href="LaTeX.html">LaTeX</a></li></ul></details></li><li><details open><summary class="navbar-category">Blocks</summary><ul><li class="navbar-entry"><a href="Blockquotes.html">Blockquotes</a></li><li class="navbar-entry-current"><a href="Code.html">Code</a></li><li class="navbar-entry"><a href="Lists.html">Lists</a></li></ul></details></li><li><details><summary class="navbar-category">Lua</summary><ul><li class="navbar-entry"><a href="Lua Basics.html">Lua</a></li></ul></details></li><li><details><summary class="navbar-category">Styles</summary><ul><li class="navbar-entry"><a href="Basic Styles.html">Basic</a></li><li class="navbar-entry"><a href="Basic Layouts.html">Layouts</a></li><li class="navbar-entry"><a href="User-Defined Styles.html">User-Defined</a></li></ul></details></li></ul></div><label for="navbar-checkbox" class="navbar-checkbox-label">&#9776;</label><div class="content"><div class="toc"><span>Table of Content</span><ol><li value="1"><a href="#Full_blocks_of_code">Full blocks of code</a></li><li value="2"><a href="#Mini_blocks">Mini blocks</a></li><li value="3"><a href="#Code_theme">Code theme</a></li></div><h1 id="Full_blocks_of_code">1. Full blocks of code <a class="section-link" href="#Full_blocks_of_code">🔗 </a> </h1><p>NML supports different kind of code blocks. The <i>full block</i> modes creates a (optionally titled), numbered code block. You can also specify the language of the block to get proper highlighting via the <a href="https://docs.rs/syntect/latest/syntect/">syntect</a> crate.</p><p><b>Example:</b></p><div class="split-container"><div class="split"><p><i>The following...</i></p><div class="code-block"><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">```</span><span style="color:#d08770;">C</span><span style="color:#c0c5ce;">, Factorial in C</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">int factorial(int n)</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">{</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> if (n &lt;= 1)</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> return 1;</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> return n * factorial(n - 1);</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">}</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">```</span></pre></td></tr></table></div></div></div><div class="split"><p><i>...gives the following</i></p><div class="code-block"><div class="code-block-title">Factorial in C</div><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-gutter"><pre><span>1</span></pre></td><td class="code-block-line"><pre><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">factorial</span><span style="color:#c0c5ce;">(</span><span style="color:#b48ead;">int </span><span style="color:#bf616a;">n</span><span style="color:#c0c5ce;">)</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>2</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">{</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>3</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if </span><span style="color:#c0c5ce;">(n &lt;= </span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">)</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>4</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return </span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">;</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>5</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return</span><span style="color:#c0c5ce;"> n * </span><span style="color:#8fa1b3;">factorial</span><span style="color:#c0c5ce;">(n - </span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">);</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>6</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">}</span></pre></td></tr></table></div></div></div></div><h2 id="Properties">Properties <a class="section-link" href="#Properties">🔗 </a> </h2><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">line_offset</span></code></a>: (number) The number of the first line (defaults: 0)</li></ul><h1 id="Mini_blocks">2. Mini blocks <a class="section-link" href="#Mini_blocks">🔗 </a> </h1><p>Mini blocks are code blocks that can span on a single line (thus blending within a paragraph).</p><p><b>Example:</b></p><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">``Rust, str.chars().iter().fold(0, |acc, _| acc + 1)``</span></code></a><a class="inline-code"><code><span style="color:#b48ead;">str</span><span style="color:#c0c5ce;">.</span><span style="color:#96b5b4;">chars</span><span style="color:#c0c5ce;">().</span><span style="color:#96b5b4;">iter</span><span style="color:#c0c5ce;">().</span><span style="color:#96b5b4;">fold</span><span style="color:#c0c5ce;">(</span><span style="color:#d08770;">0</span><span style="color:#c0c5ce;">, |</span><span style="color:#bf616a;">acc</span><span style="color:#c0c5ce;">, _| acc + </span><span style="color:#d08770;">1</span><span style="color:#c0c5ce;">)</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">``C++, auto car{ std::make_unique&lt;Car&gt;(...) };``</span></code></a><a class="inline-code"><code><span style="color:#b48ead;">auto</span><span style="color:#c0c5ce;"> car{ std::</span><span style="color:#8fa1b3;">make_unique</span><span style="color:#c0c5ce;">&lt;Car&gt;(...) };</span></code></a></li></ul><p>Mini blocks can span multiple lines, in which case they become similar to full code blocks with the following differences:</p><ol><li value="1"><b>No title:</b> Mini blocks cannot have a title at all</li><li value="2"><b>No line numbers:</b> Line numbers won't be shown</li></ol><p><b>Example:</b></p><div class="split-container"><div class="split"><p><i>The following...</i></p><div class="code-block"><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">``Rust</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">fn real_position(</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> source: Rc&lt;dyn Source&gt;,</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> position: usize</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">) -&gt; (Rc&lt;dyn Source&gt;, usize)</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">{</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> if let Some(parent) = source.parent</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> {</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> return real_position(parent.clone(), source.apply_offsets(position));</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> }</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;"> return (source.clone(), source.apply_offsets(position));</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">}</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#a3be8c;">``</span></pre></td></tr></table></div></div></div><div class="split"><p><i>...gives the following</i></p><div class="code-block"><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-line"><pre><span style="color:#b48ead;">fn </span><span style="color:#8fa1b3;">real_position</span><span style="color:#c0c5ce;">(</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#bf616a;">source</span><span style="color:#c0c5ce;">: Rc&lt;dyn Source&gt;,</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#bf616a;">position</span><span style="color:#c0c5ce;">: </span><span style="color:#b48ead;">usize</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">) -&gt; (Rc&lt;dyn Source&gt;, </span><span style="color:#b48ead;">usize</span><span style="color:#c0c5ce;">)</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">{</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">if let </span><span style="color:#c0c5ce;">Some(parent) = source.parent</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> {</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return </span><span style="color:#96b5b4;">real_position</span><span style="color:#c0c5ce;">(parent.</span><span style="color:#96b5b4;">clone</span><span style="color:#c0c5ce;">(), source.</span><span style="color:#96b5b4;">apply_offsets</span><span style="color:#c0c5ce;">(position));</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> }</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">return </span><span style="color:#c0c5ce;">(source.</span><span style="color:#96b5b4;">clone</span><span style="color:#c0c5ce;">(), source.</span><span style="color:#96b5b4;">apply_offsets</span><span style="color:#c0c5ce;">(position));</span></pre></td></tr><tr><td class="code-block-line"><pre><span style="color:#c0c5ce;">}</span></pre></td></tr></table></div></div></div></div><h1 id="Code_theme">3. Code theme <a class="section-link" href="#Code_theme">🔗 </a> </h1><p>Code theme can be controlled by the variable <a class="inline-code"><code><span style="color:#c0c5ce;">code.theme</span></code></a>. The default value is <a class="inline-code"><code><span style="color:#c0c5ce;">base16-ocean.dark</span></code></a>. According to <a href="https://docs.rs/syntect/latest/syntect/highlighting/struct.ThemeSet.html#method.load_defaults">syntect</a>'s documentation, the following themes are available:</p><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">base16-ocean.dark</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">base16-eighties.dark</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">base16-mocha.dark</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">base16-ocean.light</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">InspiredGitHub</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">Solarized (dark)</span></code></a></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">Solarized (light)</span></code></a></li></ul><p></p></div></div></body></html>