Creating Pagedown with the MarkItUp Editor

Question

I have an MVC3 site that should handle user messages. I'm trying to use MarkItUp to edit text because I like its full-featured, easy-to-configure, functionality. However, I use two markup libraries for conversion: Pagedown (client side) and MarkdownSharp (server side).

Here are the scripts in my edit 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 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 problem / my question is ... when I run this and start typing, all groovy is that the preview will convert correctly when I type , but italics don't work. I use notation notation or one *, type text or click in the editor ... it is not italicized.

Is there a problem between the Pagedown converter and the MarkItUp editor? Or am I missing nothing?

For clarification here, what a preview of a DIV (Firebug) looks like:

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

Note that "dont" is marked with _ and "each" with * .

Answer 1

What Matthew writes is what I was striving for. It sounds like you just have a CSS rule that prevents italics from displaying the way you intend it. There is nothing wrong with your Markdown implementation!

You can fix this without affecting the rest of your site by adding the correct CSS rule to style the <em> elements inside #preview.markdown in italics.

By the way, the reason CSS reset scripts remove styles is as follows: when you rely on the default browser settings to style your content, you may be tempted to use tags for their visual effect, and not for their semantic purpose. By doing this, you will most likely run into problems when browsers interpret the presentation of these elements in different ways. Resets the flip about this and tries to give you a consistent clean list in which you can write semantically valid HTML and then tweak it to your taste with CSS. Read more about this in the introduction to Eric Meyer reset .