All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Markdown Problem

  • # July 13, 2013 at 1:03 pm

    Hello everyone,

    I am currently writing a blog post for my website and in the process, encountered a problem with Markdown. The character ‘{‘ is a special character in Markdown as most of you may know. I know that you can escape it using {, but I am trying to include the character in a code block. For example, something like this:

    Your name is {{ name }}

    This ends up completely deleting the {{ characters and everything between them. I tried escaping them, but the character ends up in the code block as well. My question is, how do I escape the { character in a Markdown code block without having the character literally appearing in the code block? Please tell me if this doesn’t make sense or if I need to elaborate. Thanks in advance!

    # July 13, 2013 at 3:52 pm

    This reply has been reported for inappropriate content.

    markdown syntax is not processed inside block-level HTML elements. <code> is not “block-level,” but <pre> is; you could of course also use a <div> or <section> or something.

    # July 13, 2013 at 9:45 pm

    Thank you for the answer @traq, but I am still having issues with the blog post. I am using Jekyll and Pygments with Markdown so my code blocks look something like this:

    {% highlight html %}

    This is some code

    {% endhighlight %}

    This will get compiled into a `pre` tag containing a `code` tag containing the actual content of the code block. Based on @traq's advice, I tried abstracting the code block as the following:

    {% highlight html %}

    This is some code

    {% endhighlight %}
    Code tag here. The forums won't let me type them here...{{ name }}

    This doesn't produce the result I want as seen here: The {{ name }} completely vanishes. It doesn't render.

    I tried using HTML entities for the braces as such: Code tag here{{ user_name }}. This does work, but not as intended: Is there any way I can get the styling of the code block for the code tags containing the braces? I know that I can use id's and specifically target this one case, but is this the best way to go?

    # July 13, 2013 at 11:28 pm

    This reply has been reported for inappropriate content.

    Is {{ whatever }} intended to be parsed as a templating tag, or do you intend to display it as a literal string? A quick search shows that liquid has a
        {% raw %} {{ this won't be parsed }} {% endraw %}
    syntax. Might be helpful …?

    # July 14, 2013 at 6:52 pm

    The raw tag helped a lot! It works now! Thanks so much @traq! :D

    # July 14, 2013 at 9:28 pm

    This reply has been reported for inappropriate content.

    no problem

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed