cernopendata / opendata.cern.ch

Source code for the CERN Open Data portal
http://opendata.cern.ch/
GNU General Public License v2.0
657 stars 147 forks source link

content: investigate markdown display options #1311

Closed tiborsimko closed 7 years ago

tiborsimko commented 7 years ago

The source code of some static template pages (=guides) or of some dynamic record pages (=news articles) might be written in the Markdown format rather than HTML.

This ticket is about investigating available tools that could help us in displaying Markdown-authored pages in the COD3 ecosystem.

For example, check Flask-Markdown extensions that would permit to write Flask templates not in Jinja, but in Markdown.

For example, check pandoc tools that would read Article record body in Markdown from the DB and render them to users in HTML. (Later, a user could deposit articles via UI, so having a Markdown previewer plugged in the deposit form will also be interesting... but that will come later.)

Remember to investigate both scenarios, rendering static guides and rendering dynamic records.

hjhsalo commented 7 years ago

Concept-wise we should consider (at least) following:

After we have list of suitable Flask extensions to use or if we decide to implement something simple on our own, we should consider following:

tiborsimko commented 7 years ago

Quick comments to the points you raised:

pamfilos commented 7 years ago

Should markdown be parsed to html in client-side javascript or at server-side?

server-side rendering preferable

IMHO we should also consider client-side rendering since in the future we might add a live editing tool (WYSIWYG style), so the editor and the previewer should not have any conflicts/differences on rendering.

Any thoughts on this?

tiborsimko commented 7 years ago

@pamfilos The WYSIWIG editing tool would be the "live installation" use case, with rich Markdown-aware deposit UI, that I was mentioning in my last point. This will come later, so far GitHub PRs should be enough for all editing needs. Anyway, I see two things. Firstly, hopefully we can standardise on a very easy Markdown flavour that would be displayable both client-side and server-side without too much differences. Secondly, if we need some obscure Markdown flavour, then any client-side vs server-side rendering differences may be alleviated if the deposit UI simply makes Ajax calls to preview user-supplied Markdown...

hjhsalo commented 7 years ago

So far I have been looking into Flask-Markdown and Flask-Mistune. I made a PR #1335 which includes both implementations

In addition to py-gfm, I also found another python-markdown extension that tries to mimic GFM-syntax: http://facelessuser.github.io/pymdown-extensions/extensions/github/ This site had a lot of extensions. Not that useful for COD3, but maybe interesting for other projects: http://facelessuser.github.io/pymdown-extensions/

Mistune didn't support pygments style code highlighting out-of-the-box so based on couple of examples I threw together a custom rendered and formatter for pygments and configured Flask-Mistune to use those.

All of the examples are using safe-filter provided by Jinja to escape HTML. I haven't yet started playing around with smartypants of bleach. Those can be integrated to our "markdown-pipeline" later.

I also though of using meta-extensions for MultiMarkdown (https://github.com/fletcher/MultiMarkdown/wiki/MultiMarkdown-Syntax-Guide), but as usual that should be first tested that it doesn't mess up with GFM extensions. Shouldn't mess up anything, but should be tested first.

I'm not sure if we want to support relative linking, but we might run into trouble if we do so. I don't know how markdown-parsers or client browsers will react to the use of relative links in markdown-files. We could for example use HTML5 base-tag (https://webdesign.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399) to get around this potential-problem. There is also a way to use Jinja-style syntax inside markdown-files to generate links with url_for, but as with meta-extension, I don't know how it will affect the markdown parsing.