zk_html/tech/md-ext/editing.html

93 lines
5.4 KiB
HTML
Raw Normal View History

2020-04-22 06:55:08 +00:00
<!doctype html>
<html>
<head>
<title>Zk | Editing Markdown Extension</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 | Editing Markdown Extension</h1>
</header>
<article class="content">
<p><span class="tag">tech</span> <span class="tag">markdown</span> <span class="tag">vimwiki</span> <span class="tag">python</span> <span class="tag">package</span></p>
<h2 id="what-it-does">What it does</h2>
<p>I want to be able to have editing comments in Markdown, so I came up with some extensions to the syntax. The goal should be for the text to still be at least mostly readable.</p>
<ul>
2020-04-22 10:11:28 +00:00
<li class="done4"> Additions <code><ins class="addition">new text</ins></code></li>
<li class="done4"> Deletions <code><del class="deletion">old text</del></code></li>
<li class="done4"> Substitutions <code><span class="substitution"><del>old</del><ins>new</ins></span></code></li>
<li class="done4"> Comments <code><mark class="selected">la de da<aside>comment</aside></mark></code></li>
<li class="done4"> Resolutions <code><aside class="comment">-{bad wolf</aside>}(STET)</code></li>
2020-04-22 06:55:08 +00:00
<li>Metadata:<ul>
2020-04-22 10:11:28 +00:00
<li class="done4"> Comments on all types in parentheses after <code><span class="substitution"><del>old</del><ins>new</ins><aside>comment</aside></span></code> etc</li>
<li class="done4"> Attribution in parentheses in comment <code><ins class="addition">new<aside>comment<span class="attribution">Commenter</span></aside></ins></code></li>
<li class="done4"> Date with attribution <code><del class="deletion">old<aside>comment<span class="attribution">Commenter</span><span class="date">2020-04-21</span></aside></del></code></li>
<li class="done0"> Comment as footnote <code><mark class="selected">la de da<aside>^note</aside></mark> ... (^note): comment</code></li>
<li class="done0"> Comments can contain markup <code><mark class="selected">la de da<aside>some *markup*</aside></mark></code></li>
2020-04-22 06:55:08 +00:00
</ul>
</li>
</ul>
<blockquote>
2020-04-22 10:11:28 +00:00
<p>She <span class="substitution"><del>brushed</del><ins>stroked</ins><aside>I like this better. Attribution with date.<span class="attribution">Makyo</span><span class="date">2020-04-21</span></aside></span> her fingers <ins class="addition">softly<aside>Adverbs! Optional attributions!</aside></ins> along the edges of cabinet doors. Each <aside class="comment">-{one</aside>}(STET (Makyo 2020-04-21)) was opened and inspected, leaving her standing on tiptoes to peer in those above the counters. Nothing but cups and glasses, plates and bowls, cutting boards and pots and pans and trays and dishes. <mark class="selected">All clean and neatly stacked.<aside>^note</aside></mark></p>
2020-04-22 06:55:08 +00:00
</blockquote>
2020-04-22 08:00:08 +00:00
<p>(^note): Are you sure about this? Note at bottom of document (Makyo 2020-04-21)</p>
2020-04-22 06:55:08 +00:00
<h2 id="how-to-use-it">How to use it</h2>
<div class="codehilite"><pre><span></span><code><span class="n">default_config</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">&#39;tag_tuple&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;&lt;div class=&quot;verse&quot;&gt;&#39;</span><span class="p">,</span> <span class="s1">&#39;&lt;/div&gt;&#39;</span><span class="p">),</span>
<span class="p">}</span>
<span class="n">my_config</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">&#39;tag_tuple&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;&lt;verse&gt;&#39;</span><span class="p">,</span> <span class="s1">&#39;&lt;/verse&gt;&#39;</span><span class="p">),</span>
<span class="p">}</span>
<span class="n">markdown</span><span class="p">(</span><span class="n">source</span><span class="p">,</span> <span class="n">extensions</span><span class="o">=</span><span class="p">[</span><span class="n">VerseExtension</span><span class="p">(</span><span class="o">**</span><span class="n">my_config</span><span class="p">)])</span>
</code></pre></div>
<h2 id="where-to-get-it">Where to get it</h2>
<ul>
<li><a href="https://pypi.com/project/markdown-verse">PyPI</a></li>
<li><a href="https://github.com/makyo/markdown-verse">Github</a></li>
</ul>
<span class="control">Expand all</span>
</article>
<footer>
2020-04-22 08:00:08 +00:00
<p>Page generated on 2020-04-22</p>
2020-04-22 06:55:08 +00:00
</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>