如何将样式应用于GitBook中的代码块？

Question

I want to change the appearance of the code sections generated using ``` and ` markdown.

My book.json is

{
    "styles": {
        "website": "styles/website.css"
    }
}

and my styles/website.css says about the simplest thing I could come up with to test:

/* CSS for website */

code {
  background-color: red;
}

But my GitBook code blocks don't have a red background: https://lokathor.gitbooks.io/haskell-stuff/content/general/using_st.html

When I open the page and look in chrome's dev console, there are code tags and so on, such as <code>runST :: (forall s. ST sa) -&gt; a</code> <code>runST :: (forall s. ST sa) -&gt; a</code> , so I'm not clear on what's wrong. I don't really know CSS and I don't really know much GitBook, so it seems like I could be doing just about anything wrong.

Answer 1

Try this in your CSS file:

.book .book-body .page-wrapper .page-inner section.normal code {
  background-color: red;
}

The html generated by gitbook uses other elements, which contain the code, p, div, etc. elements, so you have to "navigate" down to these.

Answer 2

Here's what worked for me for targeting the <p> and <h1> tags:

.normal .markdown-section p
{
  //style
}

I couldn't do some things to the website's CSS, because of whatever template they have in place (I suspect), but I was able to do text-transform that way. I'm hoping to be able to alter the pdf stylesheet.

It turns out that using the PDF options in book.json is much more effective.
See this link which details various configurations options for your book, including PDF page size, font size, and margins.

{
"pdf": {
    "fontSize": 17,
    "margin": {
      "left": 80,
      "right": 80,
      "bottom": 60
    }
}
}