Stackoverflows WMD System - Where does my input become HTML?

Question

At what stage does my input in the textarea change from being this raw text, and become HTML? For example, say I indent 4 spaces

like this

Then the WMD Showdown.js will render it properly below this textarea I type in. But the text area still literally contains

    like this

So is PHP server side responsible for translating all the same things the showdown.js does to permanently be HTML in the SoF Database?

Answer 1

There are some other posts here about this, but basically it works like this. Or at least this is how I do it on my website using WMD; see my profile if you're interested in checking out my WMD implementation.

1. User enters the Markdown on the client, and showdown.js runs in real time in the browser (pure client-side JavaScript; no AJAX or anything like that) to give the user the preview.
2. Then when the user posts to the server, WMD sends the Markdown (you have to configure WMD to do this though; by default WMD sends HTML).
3. Run showdown.js server-side to convert the Markdown to HTML. In theory you could use some other method but it makes sense to try to get the same transformation on the server that the user sees on the client, other than any HTML tag filtering you want to do server-side.
4. As just noted, you'll need to do appropriate HTML tag filtering to avoid cross-site scripting (XSS) issues. This is both important and nontrivial, so be careful.
5. Save both the Markdown and the HTML in the database—the Markdown because if users want to edit their posts, you want to give them the Markdown, and the HTML so you don't have to transform Markdown to HTML every time you display answers.

Here are some related posts.

• Convert HTML back to Markdown for editing in wmd: Tells how to configure WMD to send Markdown to the server instead of HTML.
• What HTML tags are allowed on Stack Overflow?: Useful for thinking about HTML tag filtering.

Answer 2

Well first of all StackOverflow is built on ASP.NET, but yes essentially the characters in the rich text box gets translated back and forth.