My bearblog writing aid

24 Jul, 2024

I love Markdown. As a standard, it's clean and efficient, looks good, and is used everywhere there is text. Even on bearblog!

I built this Chrome Extension to make writing Markdown even easier than it already is. Just like in a code editor, simply select the text you want to wrap, press the character you want to wrap the text in, and move on with your day.

Some useful markdown commands when writing blog posts are inserting links, images, italics, bolding, code formatting, and specially formatted math markdown.

These are accomplished by wrapping some piece of text in a specific character:

And for fun: being able to wrap things in parentheses (like this) and braces {like this}.

The key thing about writing markdown, however, is that you need to be able to make sure your delimiters open and close properly.

Anyone who has written curly-bracket code can tell you that missing a parentheses or brace can make things very annoying, very quickly.

When writing blogs, we step away from the strict conventions of writing code, but it is still essential that we wrap things properly for correct formatting.

This means that when inserting a link, you'd normally have to remember to put square brackets around the text you want a link to show as, like this [my link] and then follow it with the website the link is associated to (website.com).

In my writing practice, I prefer to write as I think, as a way to freeform journal my ideas into text, and not think about the brackets and punctuation that I need to make my vision come to life.

I want to easily go back and highlight, bold, strikeout, link, and add math notation after the fact, without having to worry about typing the character both before and after item of interest.

Enter VS Code, a popular source code editor from Microsoft. It has endless features to make a developer's life more easy, but one of the most handy features, at least in my book, is the automatic text wrapping.

Simply select some code and press the (, [, or { key to unintelligently wrap your selection. This is a small feature, but incredibly handy in my code writing process.

My Chrome Extension brings that exact feature to the web-based Markdown editor. Using the table above, you can select any text in your Bearblog editor and smartly wrap it.

Some nice features:

• When trying to insert a link, select text then press [. Your text is wrapped in [<text>](), and your cursor automatically jumps inside the parentheses, so you can paste in your link
• For markdown formatting that requires two characters - don't worry about. Pressing = or ~will wrap your text with the requisite == or ~~ for proper Markdown adherence

At minimum, auto-Markdown wrapping should save you 43% of your previous keystrokes.

Take, for example, wanting to insert a Markdown link around the text "this link".

Before:

1. Click to the left of "this"
2. Press the "[" key
3. Click to the right of "link"
4. Press the "]" key
5. Press the "(" key
6. Paste in your link
7. Press the ")" key

After

1. Select "this link"
2. Press the "[" key
3. Paste in your link
4. Arrow right to keep typing

At 4 actions vs 7, even disregarding the hand movement from the keyboard to the mouse, it's easy to see that small improvements build to big time and wrist savings for the avid typer.

When factoring in the many different stylistic and structural character wrappings that one might use in drafting a blog post, that 43% boost can translate into significant time reductions.

This, of course, is all a moot point if you do your blog writing in a text editor that already has wrapping.

In future technical blog posts, I'll write out how exactly I made this extension, and what challenges and learnings I made along the way.

Cheers, Nikko