Markdown is a popular way of writing content and converting it to HTML. Many popular web development sites use it including StackOverflow and GitHub.
In fact these very pages that you see here on this sight have been created from source documents written in Markdown.
However, one little problem I’ve recently bumped into is appending width and height parameters to the image tags so images can be sized responsively, which can easily be solved applying the following changes via CSS:
img { max-width: 100%; height: auto; }This will enable the images on your site when viewed through a smaller screen to scale proportionally provided you have BOTH the width and height dimensions set on your image .
So how can I set the width and height properties on my images in Markdown?
Thankfully, the awesome nodejs module marked allows us to override rendered methods to certain html tags.
The question then becomes: how do you want to append the width and height to your image tag?
Currently, the format for an image tag looks something a little like this:
According to marked’s documentation three parameters need to be passed in to make the changes,
image( string href, string title, string text )
each of these parameters corresponding to the above areas in our example:
-
href=http://link-to-your-image-in-here.com/a.png -
title= Title of your image -
alt= Alt text
Therefore, depending on where we want to put it our width and height in these three areas will determine how we’re going to be able to access them. Before we do make any determination on where we would put this information I found on
StackOverflow a popular response
where an equal sign followed by the width dimension, a times symbol using the letter
x
, and the height dimensions can be appended within the
href
area, eg
=516x140
.
If we were to implement a similar approach in our design we would therefore amend our working example to something like this:
![Alt text](http://link-to-your-image-in-here/a.png "Title of your image" =516x140)Unfortunately though, doing so will produce the following output:
-
href=http://link-to-your-image-in-here/a.png "Title of your image" =516x140 -
title=null -
text= Alt text
If we move the dimensional values between the
link
, and the
title
tag we get:
-
href=http://link-to-your-image-in-here/a.png =516x140 -
title= Title of your image -
text= Alt text
The second output is the more preferred way, as the first method would require us to break apart the
href
variable, get both title and dimension values, and then assign them back to be returned HTML string.
The only problem we have is to REMEMBER the order of how we have these values placed – which can be difficult if we’re not writing an inserting images into our posts all the time.
So how we implement something whereby regardless of our order we will know that anything contained between the
"
is the title tag for the image and anything with an
=
sign will be a dimensional value.
Let’s create the function:
What we’ve also been able to include within this script is the ability to append class and id tags to our image. So should we wish to include a CSS class “left” we would add to our working example:
![Alt text](http://link-to-your-image-in-here/a.png "Title of your image" =516x140 :left)Plus if we also wanted to include an id tag we could simply append it into our parentheses as such:
![Alt text](http://link-to-your-image-in-here/a.png "Title of your image" =516x140 :left #an-id-tag)Conclusion
Through the use of another library called marked, we can extend Markdown to handle specialised cases where we need the Markdown interpreter to do more than it was originally designed to do.
Hopefully through the examples you’ve been able to see how we can extend Markdown with Marked’s ability to render HTML tags and may even give you further ability to do more customised stuff to your own writing workflow rather than writing raw HTML!
