Question

I have an MVC3 site that needs to handle user posts. I am trying to use MarkItUp for the text edit because I like its full featured, easy to customize, functionality. However, I am using two markdown libraries for the conversion: Pagedown (client side), and MarkdownSharp (server side).

Here’s the scripts within my editing view:

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.markitup.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery.markitup.settings.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Markdown.Converter.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Markdown.Sanitizer.js")"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        var converter = new Markdown.Converter();
        $('.editor').markItUp(markdownSettings);
        $('.markdown').live('keyup', function () {
        var md = $('#comment-editor').val();
        var html = converter.makeHtml(md);
        $('#preview').html(html);
    });
    $('.markdown').live('click', function () {
        var md = $('#comment-editor').val();
        var html = converter.makeHtml(md);
        $('#preview').html(html);
    });
});
</script>

And the HTML:

@Html.TextArea("html", "enter your text here", new { id = "comment-editor", @class = "editor" })
<div id="preview" class="markdown"></div>

So far so good. The issue/my question is… when I fire this up and begin typing, everything is groovy in that the preview is converting properly as I type, but Italic is not working. Whether i use the _ notation or single * notation, type or click in editor… it is not italicized.

Is there an issue between the Pagedown converter and the MarkItUp editor? Or did I noob-ishly miss something?

For clarification, here’s what the preview DIV looks like (Firebug):

<div id="preview" class="markdown">
    <p>stuff you <em>dont</em> see <em>every</em> day.</p>
</div>

Note that “dont” is marked with _ chars, and “every” with *.

Answer 1

What Matthew wrote is what I was getting at. It sure sounds to me like you simply have a CSS rule which is preventing the italic styling from displaying as you intend it to. There is nothing at all wrong with your Markdown implementation!

You can fix this without affecting the rest of your site by adding an appropriate CSS rule styling <em> elements within #preview.markdown as italic.

By the way, the reason that CSS reset scripts remove the styling is this: When you rely on browser defaults to style your content you may be tempted to use tags for their visual effect rather than for their semantic purpose. By doing this you are more likely to encounter issues when browsers interpret the presentation of those elements differently. The resets flip this around and attempt to give you a consistent blank slate within which you can write semantically-valid HTML and then style it to your liking with CSS. You can read more about this in the introduction to Eric Meyer’s reset.