0

This question has been asked before, but none of the answers were helpful to my case. (Please see below)

I am running Jekyll 2.5.3, with the Ion Theme, and so far I was playing with it, successfully including LaTeX in posts. Now I was adding source code snippets, but the syntax highlighting isn't working.

I've tried all the things in the list below, and I was missing some CSS entries, but I don't know where or how I could include the styles. Note that classes are correctly added to the generated HTML, but I only get a monospaced font:

<div class="highlighter-rouge">
    <pre class="highlight">
        <code>
            <span class="cp">&lt;?php</span>
            <span class="k">echo</span>
            <span class="s1">'Hello world!'</span>
            <span class="p">;</span>
            <span class="cp">?&gt;</span>
        </code>
    </pre>
</div>

Manually I've modified the CSS file (css/style.css) adding some styles from the default Jekyll theme:

/* SYNTAX HIGHLIGHT */
pre.highlight {
    background: #fff;
}
    .c     { color: #998; font-style: italic } // Comment
    .err   { color: #a61717; background-color: #e3d2d2 } // Error
    .k     { color: #000; font-weight: bold } // Keyword
    .o     { font-weight: bold } // Operator
    /* ... */

Note that the pre.highlight style works, if I change the background (or anything else) it works. I also made this CSS to load last, just to be sure.

I've tried may combinations (span.c, code span.c, ...), but I have almost zero experience with CSS, the only thing I had successfully modified is the pre.highlight, which originally was only .highlight.

Can anyone help me with this "little" issue? It's been driving me mad for some days...

Thanks!

Community
  • 1
  • 1
senseiwa
  • 2,369
  • 3
  • 24
  • 47
  • Rouge is compatible Pygments stylesheets, and typically you choose [one of the existing "styles"](https://github.com/richleland/pygments-css) and include that whole CSS file on your site rather than mixing the individual CSS bits in your own. Have you done that? – briantist Nov 13 '15 at 16:25
  • Yes @briantist, unfortunately I've tried moving to `rouge`, and `pygments`. None worked. – senseiwa Nov 15 '15 at 08:33
  • I was asking if you added the proper stylesheet to your site. Whether you're using rouge or pygments, you still need to add a stylesheet and make sure it's being loaded, otherwise you won't get any colors. I looked at the Ion theme's CSS; I don't think it's doing this for you. – briantist Nov 16 '15 at 00:15
  • I think so, I've added the above CSS lines to the main file. As I said, the pre highlight part actually works, but the other lines don't. – senseiwa Nov 16 '15 at 16:33
  • 1
    Before you go manually adding lines of CSS, try using one of the standard CSS files I linked to and see if it works. If you want to further customize from there, you can edit the CSS. – briantist Nov 16 '15 at 19:44
  • Thanks for the pointer, I've noted that styles were loaded in `head` with `noscript`, I've moved *outside* noscript, and it works. No idea why it was that way, though... – senseiwa Nov 17 '15 at 09:38

0 Answers0