Plots2: rendering code blocks using github flavored markdown in research note works in preview but not in published note

[dwblair]

I was able to copy-paste a markdown file from github:

https://raw.githubusercontent.com/walkerjeffd/riffle-ito-apps/master/analyses/20140731_thermistor/index.md

Which renders code blocks with syntax highlighting (using the "```python" etc convention):
https://github.com/walkerjeffd/riffle-ito-apps/blob/master/analyses/20140731_thermistor/index.md

into a research note, and it rendered beautifully in preview! But somehow when I hit 'publish', the final rendered result isn't parsing the code block demarcations as nicely.

But: totally awesome that we can (nearly) do this!

[walkerjeffd]

Reading through the plots2 source code, the problem appears to be that the "Preview" uses a client-side javascript library (marked.js) to render the draft note body as html (see toggle_preview()).

But when you view the published version of a note, it is rendered as html on the server using RDiscount (see render_body() function).

So the problem is caused by there being two different markdown libraries being used. And marked.js appears to support fenced code blocks (e.g. using ```) as well as syntax highlighting. But RDiscount does not appear to support either of these.

I think it would be a great addition to support fenced code blocks and syntax highlighting for published notes. Maybe the easiest way is to always used marked.js to render to html on the client (whether for preview or when viewing a published note/page).

[btbonval]

The current markdown editor isn't so good for newbies, as reported by another user. Check the above linked ticket for that discussion. We will probably want to replace marked.js with VueJS to address that ticket.

At that point, it might be worth pursuing @walkerjeffd 's suggestion of ditching RDiscount and doing the rendering fully on the client side to resolve this issue.

[rjsteinert]

At that point, it might be worth pursuing @walkerjeffd 's suggestion of ditching RDiscount and doing the rendering fully on the client side to resolve this issue.

I ran into this last night, ended up resorting to making the research note a gist and linking to that. Rendering with JS on view would fix the consistency problem, but we would need to make sure to also cater to search engines that don't index content rendered in JS. The content of the document could be plain text markdown until Javascript replaces it. The trick might be doing this in a way that is not jarring for the user. For example, as the page loads, there might be a 1 second delay where the user sees plain markdown and then _poof_, it's now formatted. If we CSS display: none to the markdown, I think search engines might ignore it.

[jywarren]

I don't know -- showing only Markdown to non-JS users seems a bit draconian and not a graceful fallback; and showing it for a moment before JS conversion would likely confuse all kinds of people.

What if we:

1. displayed the markdown in a hidden div
2. on pageload, if there are code blocks, run marked.js (with the highlight.js extension)
3. hide the RDiscount rendered markdown
4. display the marked.js rendered markdown

This is cumbersome. It looks like RedCarpet can be combined with CodeRay to provide server-side syntax highlighting: http://allfuzzy.tumblr.com/post/27314404412/markdown-and-code-syntax-highlighting-in-ruby-on

The latter may be better for us, since we have a variety of Public Lab-specific inline extensions to Markdown -- which RJ and I nicknamed "Markdown bling" last night.

[grvsachdeva]

@jywarren so what do you think would be a better approach for solving this, considering our current situation? Thanks!

[jywarren]

Let's close this and move it to https://github.com/publiclab/plots2/issues/3889 -- we can fix it there!

[grvsachdeva]

Great!