How to change the code padding effect of gitbook?

Question

This is the markdown code effect of stackoverflow:

Code from stackoverflow
Nearly no extra space at the beginning

And this is the markdown code effect of gitbook: enter image description here

The extra blanks at the beginning is confusing for me. So I decided to change it by myself.

I did:

cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less

In which there is a code block which looks like:

code {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: #f7f7f7;
    border-radius: 3px;
}

I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.

I got these files which havs code keyword in the theme directory, which should I modify?

.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html

What else should I do?

Etheryte · Answer 1 · 2015-02-05T09:07:31.030

1

This should be a comment, but you can't fiddle in comments.

As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.

code {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: #f7f7f7;
    border-radius: 3px;
}

.described {
    padding: 20px;
}

<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>

edited Feb 05 '15 at 09:07

answered Feb 05 '15 at 08:50

Etheryte

24,589
11
71
116

I'm sorry, I got zero experience on css and javascript. Could you tell me in a more plainly way what should I do to fix that? – Zen Feb 05 '15 at 08:55
1

What I'm saying here is that you haven't show us where the problem stems from and therefore we can't tell you how to fix it. The current code you've shown us doesn't reproduce the issue. – Etheryte Feb 05 '15 at 08:57
What I found is a javascript function, right? I guess somewhere else there are some file will call this function. And since the content of the functions changed, the final visual result should be changed, too. Isn't it? – Zen Feb 05 '15 at 09:03
can you give me any kind of hint based on your experience? – Zen Feb 05 '15 at 09:03
I've updated the above fiddle. The problem is probably simply css style that's inherited from somewhere else, but it's impossible to say from where without looking at the actual site/source. – Etheryte Feb 05 '15 at 09:08
I've updated the list of file I find containing the key words `code`, which ones you think may need be modified? – Zen Feb 05 '15 at 09:22

score 1 · Answer 2 · edited Jan 13 '17 at 11:42

To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.

Edit the book.json file and add the following to define the source of your own custom styles

{
    "styles": {
        "website": "styles/website.css",
        "ebook": "styles/ebook.css",
        "pdf": "styles/pdf.css",
        "mobi": "styles/mobi.css",
        "epub": "styles/epub.css"
    }
}

Anything in this file will over-ride the Gitbook styles (if you get the names right).

Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.

You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.

The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist

https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42

The results of these can styles can be seen at:

https://practicalli.github.io/clojure/basic-clojure/

Thank you

How to change the code padding effect of gitbook?

2 Answers2

Linked