How to change the code padding effect of gitbook?

问题:

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:

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?

回答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>

回答2:

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