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’s the first thing I had on hand. I’ll be posting more writing to welcome folks in the coming days, though.

Markdown and writing tech

My entire writing setup has long since shifted over to Markdown. A lot of this started for two big reasons:

1. I needed to be able to write in a text-only setting such as on a remote machine.
2. I started using static site generators (Jekyll at first, then Hugo) to host my content.

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, but here’s how it looks:

Instead, I’d like to post about some recent writing tech projects in the form of three Markdown extensions.

Verse extension

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 <div class="verse">. For example,

'''
Arctic fox's den
adorned with flowers and snow
garden in winter
'''

turns into

<div class="verse">Arctic fox's den
adorned with flowers and snow
garden in winter</div>

which, with the following style (really only the highlighted line needed)

.verse {
    white-space: pre-wrap;
    border-left: 5px solid #ddd;
    padding-left: 1rem;
}

looks like:

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 <pre> tag, which defaults to monospace font. I can also overload what tag it uses, so I can even use my own <verse></verse> tag for something more semantically acurate.

Vimwiki extensions

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.

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:

* [-] Rejected
* [ ] Idea
* [.] Stub
* [o] Alpha
* [O] Beta
* [X] Released

Turns into:

• Rejected
• Idea
• Stub
• Alpha
• Beta
• Released

when rendered into HTML.

Editing extension

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.

With this Markdown:

This is a +{new} addition

This -{this} word is removed

I say, ~{out with the old}{*in* with the new}

Here !{just a comment} is a line with a comment

You can also ?{add comments to some text}(Like *this*!{And comment within comments}!{You can thread them that way} (2020-04-21))

All -{new}(Redundant (Makyo)) edit marks can have comments with attributions and dates +{like this}(See? (Makyo 2020-04-22)) (for single comments, just put the attribution in there !{like this}(Makyo))

Bottom text

I get

This is a new addition

This this word is removed

I say, out with the oldin with the new

Here just a comment is a line with a comment

You can also add comments to some textLike thisAnd comment within commentsYou can thread them that way2020-04-21

All newRedundantMakyo edit marks can have comments with attributions and dates like thisSee?Makyo2020-04-22 (for single comments, just put the attribution in there like thisMakyo)

Bottom text

Using this stylehseet:

/* Editing extension */
del.deletion, .substitution del {
    text-decoration: line-through;
    background-color: #fbb;
    color: #555;
}

ins.addition, .substitution ins {
    text-decoration: none;
    background-color: #d4fcbc;
}

mark.selected {
    background-color: #ddf;
}

q.comment {
    display: block;
    float: right;
    width: 33%;
    border: 1px solid #ccc;
    margin-left: 0.5rem;
    padding: 0.5rem;
    clear: both;
}

q.comment q.comment {
    /* Do not float or size nested comments. */
    float: none;
    width: auto;
}

q.comment .attribution, q.comment .date {
    font-size: 10pt;
    display: inline-block;
    float: right;
    clear: both;
}

q.comment::before, q.comment::after {
    /* Use pseudo-elements for clearfix. */
    content: "";
    display: block;
    clear: both;
}

p q.comment::before {
    /* Add an arrow pointing back to the line. */
    width: 0;
    height: -0.5rem;
    float: left;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid #ccc;
    margin-left: calc(-1rem - 12px);
    margin-top: calc(-0.5rem - 1.195px);
}

ins q.comment::before {
    border-right-color: #ceebab;
}

ins q.comment {
    background-color: #d4fcbc;
}

del q.comment::before {
    border-right-color: #daa;
}

del q.comment {
    background-color: #fbb;
}

mark q.comment::before {
    border-right-color: #ddf;
}

mark q.comment {
    background-color: #eef;
}

q.comment q.comment::before {
    /* don't add arrow on nested comments. */
    border: none;
}

p + p {
    /* Clearfix on repeated paragraphs (repeated needed to allow TOC float). */
    clear: both;
}

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.

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.

Thanks for peeking in!