TryGhost / Ghost

Independent technology for modern publishing, memberships, subscriptions and newsletters.
https://ghost.org
MIT License
47.49k stars 10.36k forks source link

Fenced code blocks should use "language-*" classes #2675

Closed apfelbox closed 10 years ago

apfelbox commented 10 years ago

Hi,

currently fenced code blocks just translate the language (if given) directly into the class:

```javascript
content

produces:
content

[According to the HMTL5 spec](http://www.w3.org/TR/html5/text-level-semantics.html#the-code-element), the recommended way to markup code with a "language-" prefixed class:
content


I think Ghost should follow the spec here.
apfelbox commented 10 years ago

Bonus feature: you'll get integration with tools - which build on the spec - for free. For example prism.

ErisDS commented 10 years ago

Hi @apfelbox I appreciate your point. I ran into this myself with prism on hannah.wf and worked around it by using:

```language-javascript
content

Less than ideal, but it works!

Ultimately this is a problem with the showdown library rather than with Ghost. There are a lot of wonkinesses with the markdown implementation, which we'll address in our editor overhaul project which should be Ghost v0.7 or thereabouts.

apfelbox commented 10 years ago

Hi @ErisDS, thanks for your response. Yeah, I also thought about the language-javascript workaround, but it would be nice if it would adapt to other libraries in the long run.

Is the markdown compiler a separate project or is directly from/for Ghost?

ErisDS commented 10 years ago

@apfelbox The markdown parser is showdown: https://github.com/coreyti/showdown, but we use my fork of it in Ghost to work around issues with new HTML5 elements: https://github.com/ErisDS/showdown

Showdown is unfortunately quite buggy. There have been proposals to either fix the bugs on my fork, or to switch to another parser called marked, but both of these proposals will require a lot of time and effort, and are in my opinion not worth investing in at the present time due to the impending editor project in which overhauling the editor will be our priority.

apfelbox commented 10 years ago

@ErisDS what's with pagedown? That's what StackEdit and StackOverflow use and it seems to work reasonably well. The synchronised scrolling of markdown and rendered content works very good on StackEdit, for example (it seems quite a bit off on OS X & Chrome currently).

ErisDS commented 10 years ago

@apfelbox The problem with pagedown is exactly the same as with with switching to marked. It is a big project to investigate the differences, reimplement our customisations (like the image uploader) and make sure that people's content won't change in unexpected ways. This will take a lot of time and effort. We have an editor project (to do something like this) scheduled for the near future, right now we're focusing on other problems. You can see all of this info in the roadmap.

apfelbox commented 10 years ago

@ErisDS thank you for your detailed answer. I will leave the ticket open but look out for the editor subproject/overhaul, so that I can possibly try to contribute it myself.

Thank you so far!

shindakun commented 10 years ago

@ErisDS I ran into this due to wanting to use Prism as well, I can submit a PR on your fork of showdown if you want.

halfdan commented 10 years ago

@ErisDS This is merged on your version of showdown - it would need an update/release and update on package.json, right?

ErisDS commented 10 years ago

Yep, that's why it's assigned to me :wink:

halfdan commented 10 years ago

This is now also being discussed at "Standard Markdown": http://talk.standardmarkdown.com/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136

apfelbox commented 10 years ago

Just for the record: after the domain change, the correct URL is: http://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136

apfelbox commented 10 years ago

PS: this is now merged in CommonMark (new name of "standard markdown"): http://jgm.github.io/stmd/spec.html#example-81