zk_html/diary/2020-04-22.html

139 lines
11 KiB
HTML
Raw Normal View History

2020-04-22 18:30:08 +00:00
<!doctype html>
<html>
<head>
<title>Zk | 2020-04-22</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
</head>
<body>
<main>
<header>
<h1>Zk | 2020-04-22</h1>
</header>
<article class="content">
<p>and welcome! It is with no small sense of irony that I start of a writing SubscribeStar with a bit of writing tech rather than writing itself, but hey, it's the first thing I had on hand. I'll be posting more writing to welcome folks in the coming days, though.</p>
<p># Markdown and writing tech</p>
<p>My entire writing setup has long since shifted over to Markdown. A lot of this started for two big reasons:</p>
<ol>
<li>I needed to be able to write in a text-only setting such as on a remote machine.</li>
<li>
<ol>
<li>I started using static site generators (Jekyll at first, then Hugo) to host my content.</li>
</ol>
</li>
<li>The latter is particularly relevant lately as I've started to move toward using a personal wiki for storing my writing. The reasoning for this is that it allows me to move between projects and files without leaving my editor. Sounds easy, until you remember point number 1! I've got a whole setup working now, and have gone into that in-depth elsewhere. I'll hold off on the nuts and bolts for now.
Instead, I'd like to post about some recent writing tech projects in the form of three Markdown extensions.</li>
</ol>
<h1 id="verse-extension">Verse extension</h1>
<p>First, we have the Verse extension. It's dead simple: it looks for a block of text fenced in with triple single-quotes and wraps it in a <code>&lt;div class="verse"&gt;</code>. For example,</p>
<div class="codehilite"><pre><span></span><code><span class="s1">&#39;&#39;&#39;</span>
<span class="s1">Arctic fox&#39;</span><span class="n">s</span> <span class="n">den</span>
<span class="n">adorned</span> <span class="k">with</span> <span class="n">flowers</span> <span class="k">and</span> <span class="n">snow</span>
<span class="n">garden</span> <span class="k">in</span> <span class="n">winter</span>
<span class="s1">&#39;&#39;</span><span class="err">&#39;</span>
</code></pre></div>
<p>turns into</p>
<div class="codehilite"><pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;verse&quot;</span><span class="p">&gt;</span>Arctic fox&#39;s den
adorned with flowers and snow
garden in winter<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
<p>With the following style</p>
<div class="codehilite"><pre><span></span><code><span class="p">.</span><span class="nc">verse</span> <span class="p">{</span>
<span class="k">white-space</span><span class="p">:</span> <span class="kc">pre-wrap</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>I can write verse in an editor with newlines and indentation however I please, and it shows up just like that within the browser without using a <code>&lt;pre&gt;</code> tag, which defaults to monospace font. I can also overload what tag it uses, so I can even use my own <code>&lt;verse&gt;&lt;/verse&gt;</code> tag for something more semantically acurate.</p>
<h1 id="vimwiki-extensions">Vimwiki extensions</h1>
<p>Vimwiki, the personal wiki I use, has its own markup format which...is fine? Like, it's okay. the problem is that it's just dissimilar enough from Markdown that I have a hard time remembering the differences. Even if I were to remember them, when I transfer my files to hosting on a static site, they'd be in the wrong format.</p>
<p>Notably, I want the six-level to-do lists - representing rejected, not started, three levels of incomplete, and complete tasks - and for the tags vimwiki uses - in the format :tag1:tag2:etc: - to be displayed properly. Thus:</p>
<div class="codehilite"><pre><span></span><code><span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n"> </span><span class="o">]</span><span class="w"> </span><span class="n">Idea</span><span class="w"></span>
<span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n"> </span><span class="o">]</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n">.</span><span class="o">]</span><span class="w"> </span><span class="n">Stub</span><span class="w"></span>
<span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n"> </span><span class="o">]</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n">o</span><span class="o">]</span><span class="w"> </span><span class="n">Alpha</span><span class="w"></span>
<span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n"> </span><span class="o">]</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n">O</span><span class="o">]</span><span class="w"> </span><span class="n">Beta</span><span class="w"></span>
<span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n"> </span><span class="o">]</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="o">[</span><span class="n">X</span><span class="o">]</span><span class="w"> </span><span class="n">Released</span><span class="w"></span>
</code></pre></div>
<p>Turns into:</p>
<p><img alt="Rendered todo list" src="/assets/todo-rendered.png" /></p>
<p>when rendered into HTML.</p>
<h1 id="editing-extension">Editing extension</h1>
<p>Probably the largest of the extensions, though, is the editing extension which allows me to put editing marks within Markdown similar to how "Track Changes" and comments in LibreOffice/Word work. I can insert, delete, and substitute text, as well as comment on a selected passage or add a single comment per line.</p>
<p>With this Markdown:</p>
<div class="codehilite"><pre><span></span><code><span class="nv">This</span> <span class="nv">is</span> <span class="nv">a</span> <span class="o">+</span>{<span class="nv">new</span>} <span class="nv">addition</span>
<span class="nv">This</span> <span class="o">-</span>{<span class="nv">this</span>} <span class="nv">word</span> <span class="nv">is</span> <span class="nv">removed</span>
<span class="nv">I</span> <span class="nv">say</span>, <span class="o">~</span>{<span class="nv">out</span> <span class="nv">with</span> <span class="nv">the</span> <span class="nv">old</span>}{<span class="nv">in</span> <span class="nv">with</span> <span class="nv">the</span> <span class="nv">new</span>}
<span class="nv">Here</span> <span class="o">!</span>{<span class="nv">just</span> <span class="nv">a</span> <span class="nv">comment</span>} <span class="nv">is</span> <span class="nv">a</span> <span class="nv">line</span> <span class="nv">with</span> <span class="nv">a</span> <span class="nv">comment</span>
2020-04-22 21:20:07 +00:00
<span class="nv">You</span> <span class="nv">can</span> <span class="nv">also</span> ?{<span class="nv">add</span> <span class="nv">comments</span> <span class="nv">to</span> <span class="nv">some</span> <span class="nv">text</span>}<span class="ss">(</span><span class="nv">Like</span> <span class="nv">this</span><span class="ss">)</span>
2020-04-22 18:30:08 +00:00
2020-04-22 21:20:07 +00:00
<span class="nv">All</span> <span class="o">-</span>{<span class="nv">new</span>}<span class="ss">(</span><span class="nv">Redundant</span> <span class="ss">(</span><span class="nv">Makyo</span><span class="ss">))</span> <span class="nv">edit</span> <span class="nv">marks</span> <span class="nv">can</span> <span class="nv">have</span> <span class="nv">comments</span> <span class="nv">with</span> <span class="nv">attributions</span> <span class="nv">and</span> <span class="nv">dates</span> <span class="o">+</span>{<span class="nv">like</span> <span class="nv">this</span>}<span class="ss">(</span><span class="nv">See</span>? <span class="ss">(</span><span class="nv">Makyo</span> <span class="mi">2020</span><span class="o">-</span><span class="mi">04</span><span class="o">-</span><span class="mi">22</span><span class="ss">))</span> <span class="ss">(</span><span class="nv">though</span> <span class="nv">it</span><span class="s1">&#39;</span><span class="s">s ignored with comments !{like this}(won</span><span class="s1">&#39;</span><span class="nv">t</span> <span class="k">show</span><span class="ss">))</span>
<span class="nv">Bottom</span> <span class="nv">text</span>
2020-04-22 18:30:08 +00:00
</code></pre></div>
2020-04-22 21:20:07 +00:00
<p>I get</p>
<blockquote>
<p>This is a <ins class="addition">new</ins> addition</p>
<p>This <del class="deletion">this</del> word is removed</p>
<p>I say, <span class="substitution"><del>out with the old</del><ins><em>in</em> with the new</ins></span></p>
<p>Here <q class="comment">just a comment</q> is a line with a comment</p>
2020-04-22 23:10:06 +00:00
<p>You can also <mark class="selected">add comments to some text<q class="comment">Like <em>this</em><q class="comment">And comment within comments</q><q class="comment">You can thread them that way</q><span class="attribution">2020-04-21</span></q></mark></p>
<p>All <del class="deletion">new<q class="comment">Redundant<span class="attribution">Makyo</span></q></del> edit marks can have comments with attributions and dates <ins class="addition">like this<q class="comment">See?<span class="attribution">Makyo</span><span class="date">2020-04-22</span></q></ins> (for single comments, just put the attribution in there <q class="comment">like this<span class="attribution">Makyo</span></q>)</p>
2020-04-22 21:20:07 +00:00
<p>Bottom text</p>
</blockquote>
2020-04-22 18:30:08 +00:00
<p>Which will let me mark potential changes I'm not sure about and leave notes to myself in the things I write, something I used to do with HTML comments.</p>
<p>So I hope that gives an idea of the types of things that I've been working on that, while not exactly writing in and of themselves, are things that can be used within the context of writing.</p>
<p>Thanks for peeking in!</p>
<span class="control">Expand all</span>
</article>
<footer>
<p>Page generated on 2020-04-22</p>
</footer>
</main>
<script type="text/javascript">
document.querySelectorAll('li').forEach(el => {
if (el.querySelectorAll('li').length !== 0) {
el.classList.add('has-nested', 'closed');
el.innerHTML = `<span class="toggle"></span> ${el.innerHTML}`;
}
});
document.querySelectorAll('.toc .has-nested').forEach(el => {
el.classList.remove('has-nested', 'closed');
});
document.querySelectorAll('li.has-nested').forEach(el => {
el.querySelector('.toggle').addEventListener('click', () => {
el.classList.toggle('closed');
});
});
let expanded = false;
document.querySelector('.control').addEventListener('click', (e) => {
expanded = !expanded;
if (expanded) {
e.target.innerText = 'Collapse all';
} else {
e.target.innerText = 'Expand all';
}
document.querySelectorAll('.has-nested').forEach((el) => {
if (expanded) {
el.classList.remove('closed');
} else {
el.classList.add('closed')
}
});
});
</script>
</body>
</html>