Implementing Strike Out

This post was inspired by Configuration Management: Part 2 — A Path Forward: implement some CSS that would enable me to show added or removed text.

The first step was to add some new entries to the site’s CSS file:

.article-content span.new {
    display: inline-block;
    background-color: #b3e8b4;
}

.article-content span.strike {
    display: inline-block;
    text-decoration: line-through;
    background-color: #f2c2bf;
}

This defines two new classes for the <span> element. The first is for new text, which adds a light green background box around new text. The second is for removed text and adds a light red background and strikethrough. All my body text has the .article-content class, so I added a CSS selector. Also, since all the content is also nested in like 400 layers of <div> blocks (thanks Bootsrap), but <span> elements default to inline, I also had to change the display attribute to inline-block.¹

Now, to show that things are working, I have to invoke this new styling. I write this site in Markdown, and as far as I know, Markdown syntax doesn’t support arbitrary span elements. But it does support raw html, so that’s how I’ll have to do this.

This is a Markdown-compliant sentence with a mix of highlighted <span class="new">new text to be added</span> and <span class="strike">old text to be removed</span>.

This is a Markdown-compliant sentence with a mix of highlighted new text to be added and old text to be removed.

Lastly, I’m lazy, and there’s no way I’m typing that every time I want to use this. If I used Keyboard Maestro, or liked using Automator and Apple Script, I would probably whip something up to bind a keboard shortcut that would wrap arbitrarily selected text in the right HTML. But I don’t, and wouldn’t use the key bindings often enough to remember them.

But I do use Text Expander, so I bound this snippet definition, <span class="new"> Clipboard </span>, to “;new”, so whenever I want to use my new formatting I just type it out, cut, and invoke the snippet.