New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown code block syntax highlighting #1091

Closed
dannyfritz opened this Issue Oct 15, 2013 · 10 comments

Comments

Projects
None yet
8 participants
@dannyfritz

Will there be code block syntax highlighting supported?

It would be nice to have some code snippet coloring for programmers and hackers to use out-of-the-box.

GitHub is using Linguist:

var foo = 'bar';
if (foo) {
  alert('Why?!');
}
@halfdan

This comment has been minimized.

Show comment
Hide comment
@halfdan

halfdan Oct 15, 2013

Member

Linguist is written in Ruby and wouldn't fit into the node.js environment.

Since syntax highlighting is not an essential part of blogging (at least not for everyone) this will most likely be provided by a plugin.

Member

halfdan commented Oct 15, 2013

Linguist is written in Ruby and wouldn't fit into the node.js environment.

Since syntax highlighting is not an essential part of blogging (at least not for everyone) this will most likely be provided by a plugin.

@dannyfritz

This comment has been minimized.

Show comment
Hide comment
@dannyfritz

dannyfritz Oct 15, 2013

I believe YUIDocs does it using https://github.com/chjj/marked. Which maybe aligns more with Ghost as it is an NPM package.

I believe YUIDocs does it using https://github.com/chjj/marked. Which maybe aligns more with Ghost as it is an NPM package.

@halfdan

This comment has been minimized.

Show comment
Hide comment
@halfdan

halfdan Oct 15, 2013

Member

@dannyfritz Marked doesn't do highlighting. It has an example that uses pygmentize which in turn depends on Pygments - a Python library - to highlight code.

Member

halfdan commented Oct 15, 2013

@dannyfritz Marked doesn't do highlighting. It has an example that uses pygmentize which in turn depends on Pygments - a Python library - to highlight code.

@javorszky

This comment has been minimized.

Show comment
Hide comment
@javorszky

javorszky Oct 15, 2013

Member

Code block highlighting is plugin territory, folks. :) You can read on what might or might not be core on the planned features page.

Member

javorszky commented Oct 15, 2013

Code block highlighting is plugin territory, folks. :) You can read on what might or might not be core on the planned features page.

@sebgie

This comment has been minimized.

Show comment
Hide comment
@sebgie

sebgie Oct 15, 2013

Contributor

👍 for plugin
Just for later reference: I used Google Code Prettify (https://code.google.com/p/google-code-prettify/) before.

Contributor

sebgie commented Oct 15, 2013

👍 for plugin
Just for later reference: I used Google Code Prettify (https://code.google.com/p/google-code-prettify/) before.

@ConnorKrammer

This comment has been minimized.

Show comment
Hide comment
@ConnorKrammer

ConnorKrammer Oct 15, 2013

I wrote all of the following before the whole plugin thing actually registered. smacks forehead Anyway, I left it there it because someone might find it useful:

I'm using Marked in one of my projects. highlight.js integration is pretty simple:

marked.setOptions({
  highlight: function (code, lang) {
    return lang && hljs.LANGUAGES.hasOwnProperty(lang.toLowerCase())
      ? hljs.highlight(lang, code).value
      : hljs.highlightAuto(code).value;
  }
});

What we're basically doing is checking if lang exists, because Marked will pass it in anyway, then we're checking if it's a valid language to use with highlight.js. If both are true, we can specify the language to Marked for highlighting, otherwise we fall back to using Marked's auto-detection.

Note that the highlighting example in Marked's README is incorrect. It shows the highlight.js object taking two arguments to highlightAuto(), but it only takes one.

I wrote all of the following before the whole plugin thing actually registered. smacks forehead Anyway, I left it there it because someone might find it useful:

I'm using Marked in one of my projects. highlight.js integration is pretty simple:

marked.setOptions({
  highlight: function (code, lang) {
    return lang && hljs.LANGUAGES.hasOwnProperty(lang.toLowerCase())
      ? hljs.highlight(lang, code).value
      : hljs.highlightAuto(code).value;
  }
});

What we're basically doing is checking if lang exists, because Marked will pass it in anyway, then we're checking if it's a valid language to use with highlight.js. If both are true, we can specify the language to Marked for highlighting, otherwise we fall back to using Marked's auto-detection.

Note that the highlighting example in Marked's README is incorrect. It shows the highlight.js object taking two arguments to highlightAuto(), but it only takes one.

@mattvh

This comment has been minimized.

Show comment
Hide comment
@mattvh

mattvh Oct 16, 2013

Contributor

How about Prism? It's a client-side JavaScript solution that's used by some large blogs. (Smashing Magazine and A List Apart are just about the biggest design blogs in existence.)

Edit: nvm, you're definitely right about the "plugin territory." Missed that.

Contributor

mattvh commented Oct 16, 2013

How about Prism? It's a client-side JavaScript solution that's used by some large blogs. (Smashing Magazine and A List Apart are just about the biggest design blogs in existence.)

Edit: nvm, you're definitely right about the "plugin territory." Missed that.

@sebgie

This comment has been minimized.

Show comment
Hide comment
@sebgie

sebgie Oct 16, 2013

Contributor

Prism looks promising, I will add that to my tools list. I even heard that the NSA is using it :-D.

Contributor

sebgie commented Oct 16, 2013

Prism looks promising, I will add that to my tools list. I even heard that the NSA is using it :-D.

@ErisDS

This comment has been minimized.

Show comment
Hide comment
@ErisDS

ErisDS Oct 16, 2013

Member

Neat suggestions - I've labeled this as 'plugins' so we can find it again later.

FYI one way that you can currently add code which at least looks good on the frontend, is by using embedded gists - Casper has styles to support them.

Member

ErisDS commented Oct 16, 2013

Neat suggestions - I've labeled this as 'plugins' so we can find it again later.

FYI one way that you can currently add code which at least looks good on the frontend, is by using embedded gists - Casper has styles to support them.

@ErisDS ErisDS closed this Oct 16, 2013

@francescolaffi

This comment has been minimized.

Show comment
Hide comment
@francescolaffi

francescolaffi Oct 17, 2013

I wanted to play a bit with Ghost so I gave it a shot and now there is a plugin for that!
It use prism, if you are interested:
https://github.com/francescolaffi/ghost-prism-plugin/
http://ghost.flweb.it/ghost-syntax-highlighting-with-prismjs/

I wanted to play a bit with Ghost so I gave it a shot and now there is a plugin for that!
It use prism, if you are interested:
https://github.com/francescolaffi/ghost-prism-plugin/
http://ghost.flweb.it/ghost-syntax-highlighting-with-prismjs/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment