DEV Community

Kim Hallberg
Kim Hallberg

Posted on • Updated on

What would you add to Markdown? πŸ€”

Markdown πŸ”₯

The language we use most likely at least of ones per day. If your job includes GitHub, then it's most likely more. Its what drives our README's, issues, pull requests, its the goto for creating posts here on Dev too.

While there has been some extended syntax to it since John Gruber created it. For instance CommonMark, GFM, and more, even Dev has an added extension with the Liquid tags.

If you had the change to add a new syntax that would be used on your favorite sites, what would you add? I would like to have an aligning extension that lets us align text, images, and more much more than adding.

<p align="center"></p>
Enter fullscreen mode Exit fullscreen mode

Which isn't supported on all platforms. Since most remove HTML tags server-side when the content has uploaded. which to be fair is something they should never trust user-uploaded content. πŸ‘

So, what would you add to Markdown?
Comment down below with your extension and start the discussion. πŸ™‚

Discussion (39)

Collapse
tomfern profile image
Tomas Fernandez • Edited on

I would add includes. With org-mode I can do this:

#+INCLUDE: "./myscript.sh" src bash

And the contents are automatically included when I render it in other formats. I'd like to have that in markdown.

Collapse
thinkverse profile image
Kim Hallberg Author

So in this example would it include it rendered in a code-block, because that would be amazing to have on GitHub, that way instead of copying the file yourself you could do.

#+INCLUDE: "./myscript.sh" src bash 2 5

Where the first argument is the file, the second is the directory to look in, third would be the highlight, fourth and fifth would be the lines in the file to copy, zero-based index, because we developers love that. πŸ‘

Collapse
tomfern profile image
Tomas Fernandez

Yes, it works like images. It gives us the option to put the code on a separate file and still be rendered as a single document. It would be neat feature to have, specially to write READMEs.

The org-mode help shows all the things we could do with includes.

Collapse
rfaulhaber profile image
Ryan Faulhaber • Edited on

Less rigorous table syntax, at least in GFM. This is an idea stolen from the wonderful Org mode.

Tables in GFM have to be very strictly formatted. This is an issue I've run into on GitHub over and over again, so much so that I just use some external tool to deal with it.

In GFM, you have to write:

| heading 1 | heading 2 |
|-----------|-----------|
| foo       | baz       |
| bar       | quux      |
|           |           |

The equivalent could be written in Org as:

| heading 1 | heading 2|
|-
| foo | baz |
| bar | quux |
| | |

This is something Markdown should just steal, honestly!

Collapse
else profile image
Simon

Are you sure about this? I thought it just works, at least you don't need to make sure the columns are equal width. The header body separator will not work like this though. But yea, table syntax is kind of weird, I agree.

Collapse
thinkverse profile image
Kim Hallberg Author

Ooh yes, better tables absolutely, even though it's something that's "old" and we don't talk about often, we do still use it, it's still the best way to display data without using something like grid IMO.

Collapse
sm0ke profile image
Sm0ke • Edited on

target="_blank" option for urls & images

Collapse
thinkverse profile image
Kim Hallberg Author

I can see that as being useful in situations, just hope it will have the noreferrer and noopener attributes added by default then. πŸ˜‰

Collapse
else profile image
Simon

Interesting. I actually decide this on my own and usually open links in tabs by pressing a key.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

I have used Showdown.js for that it is easy to create extensions.

However, the most basic I would want, is markdown inside HTML. (data-markdown attribute is not supported in some parsers.)

Another feature is customized, is simplified table syntax.

I also added (scoped) CSS inside markdown, (with <style>).

Collapse
thinkverse profile image
Kim Hallberg Author

Scoped CSS would be so nice to have, I think with scoped CSS being correctly interpreted by the parser and limited correctly it could bring a lot of variety to what you can do with Markdown. πŸ™‚

Collapse
bias profile image
Tobias Nickel

For my blog, made with hexo, there are many plugins that allow add extra content.

I also developed a plugin to add UML diagrams with nomnoml syntax to my posts.

Collapse
thinkverse profile image
Kim Hallberg Author

Never heard of nomnoml before but it looks awesome, that plugin would be an awesome extension to have, especially in docs or tutorials and things of that nature. πŸ™‚

Collapse
j3ffjessie profile image
J3ffJessie

I would love to be able to embed live web pages using MD. For hosting live versions of a blog post or something similar using MD would be awesome. Unless I’m missing something this isn’t possible with GFM, or traditional markdown either. Would love someone to point me to the solution if it’s able to be done. As I am newer to markdown I don’t know everything but I have been unable to find a way to do this.

Collapse
thinkverse profile image
Kim Hallberg Author

I don’t personally know if it’s possible but if the service supported <iframes> I guess maybe, with GitHub and GFM I suppose you could technically do it with an action, I use the action for my GitHub profile that updates a list of my post from Dev, you could probably do something similar but with larger content.

Collapse
j3ffjessie profile image
J3ffJessie • Edited on

Tested with iframes>at least on GitHub it’s not supported. Not familiar with actions yet, have no idea how they work so I’ll have to look into them.

Collapse
csgeek profile image
csgeek

This is very specialized but I use docusaurus beta version and it allows jsx snippets and components to be added to a markdown file. It's a cool idea and really let's you extend what your simple .md files can do but not sure I'd want that for md in general.

It is cool too still be able to use simple markdown or create rich dynamic content and being able to mix and match.

Collapse
j3ffjessie profile image
J3ffJessie

Interesting. Wonder if that would allow for more customization on the GH profile README pages. I’ll have to look into that. Thanks for the information

Thread Thread
csgeek profile image
csgeek

I meant to add this initially but if you are interested reference. v2.docusaurus.io/docs/static-asset... I'm also not affiliated with them in anyways, it's a FB project. But I have been using it heavily for both community documentation and work API docs.

Thread Thread
j3ffjessie profile image
J3ffJessie

Thanks a ton. Definitely going to implement this in a project soon

Thread Thread
csgeek profile image
csgeek

If you want an example: repo uses Travis CI to deploy each commit using this config and ends up on this repo with the final result being geekbeacon.github.io/.

There's a decent discord and feel free to message me directly if you need help. I don't want to tangent too much since we were talking about markdown in the OP not docusaurus

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

iframe, script, and style tags are dangerous by default.

Only if you host your own markdown that will be able to customize and allow them.

Collapse
thinkverse profile image
Kim Hallberg Author

Isn't that why the sandbox attribute was added to <iframe>, I haven't messed with them in years but I remember there being talk about sandboxing it solved that issue. πŸ€”

Thread Thread
j3ffjessie profile image
J3ffJessie

I will look into it. I appreciate your knowledge.

Collapse
vtrpldn profile image
Vitor Paladini

.mp4 support hands down

I had to add some gifs to an article today and each weighted about 1MB even after compression :(

Collapse
bias profile image
Tobias Nickel • Edited on

GIFs are awesome

Collapse
thinkverse profile image
Kim Hallberg Author

Nice, native support for the <video> tag, that would be a nice thing to have absolutely. πŸ‘

Collapse
csgeek profile image
csgeek

There are likely plugins that do this but latex math expressions world be nice.

Lots of platforms support syntax highlighting but not sure if there is a standard.

It'd be nice if code highlighting just worked uniformly.

Collapse
thinkverse profile image
Kim Hallberg Author

Not much of a math person myself, but that would be nice for users who read and write those expressions. πŸ‘

Collapse
grimlink profile image
Sean van Zuidam

Support for the <details> element

Collapse
thinkverse profile image
Kim Hallberg Author

That would be useful. πŸ‘

Collapse
alc0r1985 profile image
Alfio

A flowchart/sequence diagram/gantt/etc standard syntax, like Mermaid.js
Some sort of anchors to create easily things like index

Collapse
trollboy_j profile image
Jacko

Embedded video, highlighted text, and much more

Collapse
thinkverse profile image
Kim Hallberg Author

Yes to all of that. 🀘

Collapse
yujiri8 profile image
Ryan Westlund

spoilers.

Collapse
dlordi profile image
dlordi

It would be nice to have a Copy to clipboard button next to code blocks (triple backticks). This is not a formatting feature but it would be really useful for code snippets!

Collapse
cchacin profile image
Carlos Chacin β˜•πŸ‘½

Markdown is supposed to be and stay simple in terms of features, a better alternative and still simple is AsciiDoc

Collapse
javacode7 profile image
JavaCode7

Subtitles. Definitely subtitles. I don't really use them but I think they will be useful.