Last active
August 29, 2015 14:05
-
-
Save webbyworks/81b25ab07e13d1b0a472 to your computer and use it in GitHub Desktop.
This will rerender the way Markdown handles image tags by using Marked's ability to customise the rendering. This particular function enables users to enter dimensional values (such as width and height) as well as class and id selectors to the image tag.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = /"(\w*\s*)+"/; | |
// 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( /"/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 + '>'; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment