makyo
/
zk_html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
zk_html/diary/2020-04-22.html

228 lines
21 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<title>Zk | Writing process update</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 | Writing process update</h1>
</header>
<article class="content">
<div class="toc">
<ul>
<li><a href="#markdown-and-writing-tech">Markdown and writing tech</a></li>
<li><a href="#verse-extension">Verse extension</a></li>
<li><a href="#vimwiki-extensions">Vimwiki extensions</a></li>
<li><a href="#editing-extension">Editing extension</a></li>
</ul>
</div>
<p>Hello 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&rsquo;s the first thing I had on hand. I&rsquo;ll be posting more writing to welcome folks in the coming days, though.</p>
<h1 id="markdown-and-writing-tech">Markdown and writing tech</h1>
<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>I started using static site generators (Jekyll at first, then Hugo) to host my content.</li>
</ol>
<p>The latter is particularly relevant lately as I&rsquo;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&rsquo;ve got a whole setup working now, and have gone into that in-depth elsewhere. I&rsquo;ll hold off on the nuts and bolts for now, but here&rsquo;s how it looks:</p>
<video src="/assets/zk.webm" autoplay loop></video>
<p>Instead, I&rsquo;d like to post about some recent writing tech projects in the form of three Markdown extensions.</p>
<h1 id="verse-extension">Verse extension</h1>
<p>First, we have the Verse extension. It&rsquo;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>&#39;&#39;&#39;
Arctic fox&#39;s den
adorned with flowers and snow
garden in winter
&#39;&#39;&#39;
</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>which, with the following style (really only the highlighted line needed)</p>
<div class="codehilite"><pre><span></span><code><span class="p">.</span><span class="nc">verse</span> <span class="p">{</span>
<span class="hll"> <span class="k">white-space</span><span class="p">:</span> <span class="kc">pre-wrap</span><span class="p">;</span>
</span> <span class="k">border-left</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ddd</span><span class="p">;</span>
<span class="k">padding-left</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>looks like:</p>
<div class="verse">Arctic fox&rsquo;s den
adorned with flowers and snow
garden in winter</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&hellip;is fine? Like, it&rsquo;s okay. the problem is that it&rsquo;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&rsquo;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">Rejected</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">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="n">Stub</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">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">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>
<ul>
<li class="rejected"> Rejected</li>
<li class="done0"> Idea</li>
<li class="done1"> Stub</li>
<li class="done2"> Alpha</li>
<li class="done3"> Beta</li>
<li class="done4"> Released</li>
</ul>
<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 &ldquo;Track Changes&rdquo; 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="n">This</span> <span class="k">is</span> <span class="n">a</span> <span class="o">+</span><span class="err">{</span><span class="k">new</span><span class="err">}</span> <span class="n">addition</span>
<span class="n">This</span> <span class="o">-</span><span class="err">{</span><span class="n">this</span><span class="err">}</span> <span class="n">word</span> <span class="k">is</span> <span class="n">removed</span>
<span class="n">I</span> <span class="n">say</span><span class="p">,</span> <span class="o">~</span><span class="err">{</span><span class="k">out</span> <span class="k">with</span> <span class="n">the</span> <span class="k">old</span><span class="err">}{</span><span class="o">*</span><span class="k">in</span><span class="o">*</span> <span class="k">with</span> <span class="n">the</span> <span class="k">new</span><span class="err">}</span>
<span class="n">Here</span> <span class="o">!</span><span class="err">{</span><span class="n">just</span> <span class="n">a</span> <span class="k">comment</span><span class="err">}</span> <span class="k">is</span> <span class="n">a</span> <span class="n">line</span> <span class="k">with</span> <span class="n">a</span> <span class="k">comment</span>
<span class="n">You</span> <span class="n">can</span> <span class="n">also</span> <span class="o">?</span><span class="err">{</span><span class="k">add</span> <span class="n">comments</span> <span class="k">to</span> <span class="k">some</span> <span class="nb">text</span><span class="err">}</span><span class="p">(</span><span class="k">Like</span> <span class="o">*</span><span class="n">this</span><span class="o">*!</span><span class="err">{</span><span class="k">And</span> <span class="k">comment</span> <span class="n">within</span> <span class="n">comments</span><span class="err">}</span><span class="o">!</span><span class="err">{</span><span class="n">You</span> <span class="n">can</span> <span class="n">thread</span> <span class="n">them</span> <span class="n">that</span> <span class="n">way</span><span class="err">}</span> <span class="p">(</span><span class="mi">2020</span><span class="o">-</span><span class="mi">04</span><span class="o">-</span><span class="mi">21</span><span class="p">))</span>
<span class="k">All</span> <span class="o">-</span><span class="err">{</span><span class="k">new</span><span class="err">}</span><span class="p">(</span><span class="n">Redundant</span> <span class="p">(</span><span class="n">Makyo</span><span class="p">))</span> <span class="n">edit</span> <span class="n">marks</span> <span class="n">can</span> <span class="n">have</span> <span class="n">comments</span> <span class="k">with</span> <span class="n">attributions</span> <span class="k">and</span> <span class="n">dates</span> <span class="o">+</span><span class="err">{</span><span class="k">like</span> <span class="n">this</span><span class="err">}</span><span class="p">(</span><span class="n">See</span><span class="o">?</span> <span class="p">(</span><span class="n">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="p">))</span> <span class="p">(</span><span class="k">for</span> <span class="n">single</span> <span class="n">comments</span><span class="p">,</span> <span class="n">just</span> <span class="n">put</span> <span class="n">the</span> <span class="n">attribution</span> <span class="k">in</span> <span class="n">there</span> <span class="o">!</span><span class="err">{</span><span class="k">like</span> <span class="n">this</span><span class="err">}</span><span class="p">(</span><span class="n">Makyo</span><span class="p">))</span>
<span class="n">Bottom</span> <span class="nb">text</span>
</code></pre></div>
<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>
<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>
<p>Bottom text</p>
</blockquote>
<p>Using this stylehseet:</p>
<div class="codehilite"><pre><span></span><code><span class="c">/* Editing extension */</span>
<span class="nt">del</span><span class="p">.</span><span class="nc">deletion</span><span class="o">,</span> <span class="p">.</span><span class="nc">substitution</span> <span class="nt">del</span> <span class="p">{</span>
<span class="k">text-decoration</span><span class="p">:</span> <span class="kc">line-through</span><span class="p">;</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#fbb</span><span class="p">;</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#555</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">ins</span><span class="p">.</span><span class="nc">addition</span><span class="o">,</span> <span class="p">.</span><span class="nc">substitution</span> <span class="nt">ins</span> <span class="p">{</span>
<span class="k">text-decoration</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#d4fcbc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">mark</span><span class="p">.</span><span class="nc">selected</span> <span class="p">{</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#ddf</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">float</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">33</span><span class="kt">%</span><span class="p">;</span>
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
<span class="k">margin-left</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
<span class="c">/* Do not float or size nested comments. */</span>
<span class="k">float</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">.</span><span class="nc">attribution</span><span class="o">,</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">.</span><span class="nc">date</span> <span class="p">{</span>
<span class="k">font-size</span><span class="p">:</span> <span class="mi">10</span><span class="kt">pt</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
<span class="k">float</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
<span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span><span class="o">,</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span>
<span class="c">/* Use pseudo-elements for clearfix. */</span>
<span class="k">content</span><span class="p">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
<span class="c">/* Add an arrow pointing back to the line. */</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mf">-0.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
<span class="k">border-top</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
<span class="k">border-bottom</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
<span class="k">border-right</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
<span class="k">margin-left</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mi">-1</span><span class="kt">rem</span> <span class="o">-</span> <span class="mi">12</span><span class="kt">px</span><span class="p">);</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mf">-0.5</span><span class="kt">rem</span> <span class="o">-</span> <span class="mf">1.195</span><span class="kt">px</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt">ins</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
<span class="k">border-right-color</span><span class="p">:</span> <span class="mh">#ceebab</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">ins</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#d4fcbc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">del</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
<span class="k">border-right-color</span><span class="p">:</span> <span class="mh">#daa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">del</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#fbb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">mark</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
<span class="k">border-right-color</span><span class="p">:</span> <span class="mh">#ddf</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">mark</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#eef</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
<span class="c">/* don&#39;t add arrow on nested comments. */</span>
<span class="k">border</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="o">+</span> <span class="nt">p</span> <span class="p">{</span>
<span class="c">/* Clearfix on repeated paragraphs (repeated needed to allow TOC float). */</span>
<span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>Which will let me mark potential changes I&rsquo;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&rsquo;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>
</article>
<footer>
<p>Page generated on 2020-06-24</p>
</footer>
</main>
<script type="text/javascript">
document.querySelectorAll('.tag').forEach(tag => {
let text = tag.innerText;
tag.innerText = '';
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink