Extending Markdown Flavours to add underlining

Where art thou dear underlines?

Oh look at that it’s 04:04 and well I’m missing these underlines, much like the sleep that I regularly end missing during the nights. I don’t mind missing the sleep, but I do mind missing these underlines, so where art thou, dear underlines?

Well, Somewhere Someone Silly/Stupid (probs more silly than stupid) decided that with the invention of the WWW(world wide web) that we should throw away the use of underlining any text for emphasis due to the misunderstanding about how impactful this can be, whether in written text or in Web based text. Perhaps that was due to a lack of foresight or I hope more likely that the standards around the digital display of text weren’t really there yet to allow this to be something that just was, and not something that isn’t native in many parts of web development like Markdown Flavours.

Sorry but this is one where it’s always confuzzled me, as well as irked me something rotten. Like really rotten, I’ve yelled into plenty a different void about it.

I do remember reading an article about this sometime in the past, which also irked me, and just about every other one I read saying basically NO DONT do this anymore, seems to have been written with very different understandings to mine about it’s use. I am British, and went to a good school with a really good English teacher, though I definitely could have done well with paying more attention at the time, sadly I was far too happily focused on my speaking ability vs at the time my writing ability.

Oooh a possible fixy fixy

That aside, I propose to fix this absurdity that we in future as part of a change to the markdown spec’s in use, like GitHub flavoured Markdown that when we post a link that it auto wraps our links with the 🔗 emoji so that a link would show like this 🔗blog.kilasuit.org🔗 & is something that I intend to ensure is consistent across this site, in the near future.

This from an accessibility point of view makes links visible whilst also allowing the use of underlined text. That’s what I call a Win|Win 🎉🎉

We however have a need to in future allow for multiple levels of underlined text as well much easier, I propose a max of 3 underlines each getting smaller than the first. That is not a current Ryan problem, and I hope someone else will help make that a possibility in the future as I think it likely needs more work in the HTML Spec to support, not that I’ve looked too hard at this as I only needed for now the 1 underline.

Helpful Code Snippets

I use VSCode & have added the following code snippets in my projects to make it easier to add these whilst authoring but I would much prefer that we added more simple shortcuts for these instead and that they were more native going forward.

Hopefully just posting this will get people to look & think that makes sense & for this to be something that changes in the not too distant future.

This needs adding to a .vscode\custom.code-snippets file in your projects or can be added via custom extension (which I intend to build for my own stuff in future) or via a global user snippets file.

"MarkdownLink": {
    "scope": "markdown",
    "prefix": "mlink",
    "body": [
      "[🔗${1:link text}🔗](${2:url})"
    ],
    "description": "adds a markdown link with link text and url that is wrapped in link emojis"
  },
    "MarkdownBoldUnderlined": {
    "scope": "markdown",
    "prefix": "mbu",
    "body": [
      "<u><b>${1:text}</b></u>"
    ],
    "description": "wraps text in bold and underline tags"
  },
  "MarkdownBoldUnderlinedOpen": {
    "scope": "markdown",
    "prefix": "mbuo",
    "body": [
      "<u><b>"
    ],
    "description": "wraps text in bold and underline tags"
  },
  "MarkdownBoldUnderlinedClose": {
    "scope": "markdown",
    "prefix": "mbuc",
    "body": [
      "</b></u>"
    ],
    "description": "wraps text in bold and underline tags"
  },
    "MarkdownUnderlined": {
    "scope": "markdown",
    "prefix": "mu",
    "body": [
      "<u>${1:text}</u>"
    ],
    "description": "wraps text in bold and underline tags"
  },

Yeah I need to sort those descriptions out, and if I go for the custom extension then I would add a process to add new shorthand links for when my new posts across all my blog sites or other content streams are released.

Also I wanna get better at instead of embedding code like the above and publish it as a gist. Perhaps the VSCode Markdown Preview could allow for rendering gists and not require me to have to spin up a Hugo Server or other similar tooling which would be a big help to authors like me.

Wrapping up

I hope this was a nice shorter useful post and shows you some use for custom snippets in languages like markdown etc & where they may be of use in languages like PowerShell, C#, Python, Rust, TypeScript/JavaScript or in pure HTML/CSS etc etc.

That said, I’m going to possibly not need the MarkdownLink snippet as the theme I am adding native support for this in the theme that I use in this blog and other sites of mine, granted with the help of copilot to start some of the work, then me merge it, and then over the Christmas break from Uni I intend to play around with updating that theme’s repo, and publishing it to the Hugo Themes list. If you are interested in some of the improvements just go over and have a look at 🔗Hugo Theme Pure - kilasuit’s GitHub🔗 which whilst was a fork, will get a minor rename, as there’s been lots of improvements in just the last week alone.

Oh and GitHub Copilot & alike do still remind me of many of my #TechBuddies, which is why I’ll still call them #AssistiveTechBuddies & not an AI Agent.

Hope ya have a nice day and rest of the week lined up! Now to catch up on more of my Uni Work, and I’ll post about how this is all going another time.