In the previous part, we’ve setup a sandbox rails application that will allow you to upload images or write content.
Markdown syntax for images and links
The Markdown link and image syntax are similar :
That syntax works for external resources and we need to find a way to specify our images while keeping that syntax working as still
Defining the URL pattern to reference Paperclip file, size and class attribute
Editors will use most of the time an absolute URL or a relative one, but the use of a filename without leading slash or protocol is unlikely (especially if we’re using a classic Rails route but it’s still possible), so we’ll base our notation on that assumption : if the filename is only constituted by letters or numbers and punctuation, we’ll look in database for a match. If none is found, we’ll use the string for the URL, unmodified :
We’ll enhance the integration with Paperclip by adding the size. To differentiate the file id from the size parameter, we’ll separate them by a pipe :
It’s often nice to use HTML class attribute for images within content and we’ll continue to use a pipe separator.
We could write the following regexp : the first captured text will be the id, the optional second capture the size and the last optional capture will be HTML classes.
Adding support into Redcarpet
Our helper will use a new class, that extends the default Redcarpet renderer and override the methods for image and links.
Add support for other resources
In our Blog example and its PostController, you may want to link other posts or another model you have, but with the default Redcarpet renderer the only way to do it is to use a absolute URL : something like /controler/action/id. It’s not a perennial way as URLs / routes may change. One way to address that problem is to extend or replace the pattern we defined earlier. A possible notation could be :
Add support for your own markup
Wordpress has a handy feature, called shortcode, that allow editor to add content, external or internal - e.g. include a tweet using its id, embed a video from Youtube or a Google Documents Spreadsheet - with simple syntax like
Such functionality could easily be added to Redcarpet, using the