Add code syntax highlighting

miekg / learninggo

Learning Go Book in mmark

https://miek.nl/go

Other

542 stars 111 forks source link

Add code syntax highlighting #39

Closed antoniomo closed 7 years ago

antoniomo commented 7 years ago

This adds client-side syntax highlighting with http://prismjs.com

I'm aware that probably server-side syntax highlighting would be preferable, but this way we don't need to change anything in mmark or depend on pygmentize or a similar tool being installed.

TODO:

Properly add language hints to all code blocks, the inlined ones don't have.
Let the user decide a different colorscheme.

Fixes issue #2

miekg commented 7 years ago

Also how does this look? I'm sort of weening myself from highlighting in my editor, so I want to keep this light as well - just bold keywords would be nice - more might be overkill

antoniomo commented 7 years ago

I see! It looks like this: http://prismjs.com/#examples and on the upper right part of the page you can change the theme. I picked up solarized as it's quite subtle and I thought good for a book, the default theme is a bit more colorful/maybe too much.

To test it with Go code/your book, do make first to generate the html as usual, then make addhl would add the syntax highlighting on those blocks that are properly marked as Go code. I can add the language hints on the other blocks these days if you like it, let me know :)

miekg commented 7 years ago

I'm sorry, but I find the default and 'solarized light' pretty unreadable. :-(

What I would like to add is to make the Go keywords bold, but that's it. Is that easily doable with prism? Or rip the stuff out of prism to make that possible?

antoniomo commented 7 years ago

I guess since prism already understand the Go keywords we just need to fiddle with the css so that there's no coloring, only bold on those. Other than keywords, should we put bold for builtin types too (int et al)? I'll check this out tomorrow, now it's bed time here!

antoniomo commented 7 years ago

Hi! On a quick test this will be trivial to do. I'll polish the CSS a bit and do a new pull request once I'm done :)

miekg commented 7 years ago

[ Quoting notifications@github.com in "Re: [miekg/learninggo] Add code syn..." ]

Hi! On a quick test this will be trivial to do. I'll polish the CSS a bit and do a new pull request once I'm done :)

great! And thank you.

/Miek

-- Miek Gieben