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:

![Alt text](http://link-to-your-image-in-here/a.png "Title of your image")

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:

      
        renderer.image = function( href, title, text ) {
      
            var result = ' alt="' + text.trim() + '" '; // this will be used to store our dimension string (if applicable)
      
            var w, h; // our width & height variables
      
            // title tags need to be between double quotes
      
            var rTitle = /&quot;(\w*\s*)+&quot;/;
      
            // dimension values need to prefix with an equal sign
      
            // followed by at least one digit and the times 'x' sign
      
            // and (optionally) MAY have a second value
      
            var rDims = /=(\d+)x(\d*)/;
      
            // classes to be placed within the image need to be prefixed with a colon
      
            // any subsequent classes to be added with a "." without any leading or trailing
      
            // spaces. IT MUST HAVE A SPACE IN FRONT OTHERWISE IT WILL CONFLICT WITH
      
            // LINKS CONTAINING http://...
      
            var rClass = /\s+:([^\)|\s]+)/;
      
            // ids need to be prefixed with a hash symbol. MUST HAVE A SPACE BEFORE OTHERWISE
      
            // CAN GET CONFUSED WITH URLs.
      
            var rId = /\s+#([^\)|\s]+)/;
      
            // first let's grab the title and then remove from href
      
            if ( title === null ) {
      
                var getTitle = rTitle.exec( href );
      
                if ( getTitle && getTitle[0].length ) {
      
                    title = getTitle[0].replace( /&quot;/g , "" );
      
                    result += ' title="' + title + '" ';
      
                }
      
                href = href.replace( rTitle, "" );
      
            }
      
            // get dimension values from href
      
            var getDims = rDims.exec( href );
      
            if ( getDims[0].length ) {
      
                // width is the first dimension value
      
                w = getDims[1];
      
                result += ' width="' + w + '" ';
      
                // height is the second dimension value (optional)
      
                if ( getDims.length > 1 ) {
      
                    h = getDims[2];
      
                    result += ' height="' + h + '" ';
      
                }
      
                href = href.replace( rDims, "" );
      
            }
      
            // get class tag from href
      
            var getClass = rClass.exec( href );
      
            if ( getClass && getClass[0].length ) {
      
                var c = getClass[1];
      
                result += ' class="' + c + '" ';
      
                href = href.replace( rClass, "" );
      
            }
      
            // get id tag from href
      
            var getId = rId.exec( href );
      
            if ( getId && getId[0].length ) {
      
                var i = getId[1];
      
                result += ' id="' + i + '" ';
      
                href = href.replace( rId, "" );
      
            }
      
            return '<img src="' + href.trim() + '" ' + result + '>';
      
        };

view raw render-image-markdown.js hosted with ❤ by GitHub

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!

When working with formulas in your model sheets in Adaptive Planning you may come across an oblique error which doesn’t initially appear to make sense, but once you understand what it is, it becomes fairly obvious what it means (like most errors!).

Problem

So what is the error and how do you fix it?

Have you been writing an if statement or two in your formula?

The reason for the error is that it relates to an if function used in your formula. You need to make sure the structure of your if formula statements contain a truth-y capture, and a false-y capture.

For example:

if ( 2 > 1, 3, 0 )

In the above if formula, we have a capture of the statement first, which asks: is 2 is greater than 1 (2 > 1)?

If the statement is true then we return the first capture in our if statement structure, being 3. If the statement is false then we return the second part of our if statement, being 0.

Solution

So look at your if statement in your model and check the following:

Is there a true and false section to the if statement?
If there are nested if statements check the brackets are in the right areas.

Simple examples of where I’ve encountered the error in my own model sheets:

I’ve removed a function within the statement part of the if function and have forgotten to remove all the brackets from within that section, or perhaps I did not have enough brackets:

if ( 2 > 1 ) 3, 0 )

The other times I have made this mistake is when I go a bit crazy on nested if functions and forget one of the outer if statements didn’t have its false-y value.

if ( 2 > 1, if ( 3 = 0, 1, 2 ) )

Conclusion

If you come from an Excel or spreadsheet background these errors should be relatively easy to spot. If you are more familiar with a programming language writing if statements like this can be a bit of hassle.

If you’re coming from another language just remember the if statement is a function and requires 3 parameters.