search

Foundation-for-Jekyll-sites / jekyll-foundation

Start your Jekyll (v3) project with Zurb Foundation for Sites (v6, sass).
MIT License
179 stars 64 forks source link

code highlighting not working #47

Closed salex closed 7 years ago

salex commented 7 years ago

Decided to move from Octopress (jekylll based) to pure jekyll. Since I use foundation 6 in rails thought I'd try this version.

Got everything up fairly fast except code highlighting. I has all the rouge container tags but the source is not processed and ends up with what looks like paragraphs in a gray box.

I may be missing something, but not sure what

huphtur commented 7 years ago

@core77 code highlighting is not working is because we're missing some styling.

Should we add some default styling (any of these should work)? If so, since we're using SMACSS, where do you suggest we add this? An extra file in /themes or add to /themes/_theme.css?

Or is there a better way to handle this?

core77 commented 7 years ago

Would be nice, if there's a solution available that can be handled by npm or yarn.

The theme folder in assets/scss is meant to be used for themeing the complete site, I thought. Tell me, if I'm wrong.

Maybe u can say a highlighted code block is a module? (assets/scss/modules)

huphtur commented 7 years ago

Found pygments-css, which comes with a bunch of themes and could easily be loaded via @import 'node_modules/pygments-rouge-css/default';.

And you're correct on the theming thing. Modules would be better spot. Should that import line be added to app.scss under // 8. Modules or to _m-your-module.scss?

kculmback commented 7 years ago

Make sure you are following the instructions listed in the Jekyll documentation: https://jekyllrb.com/docs/templates/#code-snippet-highlighting

All you needs besides that is a stylesheet for the code! You can make one on your own or include the pygments stylesheet @huphtur suggested or any other rogue/pygment compatible stylesheet, such as this one.

If the stylesheets are added via npm/yarn that the should be imported in app.scss. If you write your own SCSS then I would go the route of putting it in _m-your-module.scss.