Как изменить эффект заполнения кода gitbook?

Это эффект кода уценки stackoverflow:

Code from stackoverflow
Nearly no extra space at the beginning

И это эффект кода уценки gitbook:введите здесь описание изображения

Меня смущают лишние пробелы в начале. Вот и решил поменять сам.

Я сделал:

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

В котором есть блок кода, который выглядит так:

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

Я изменил font-size на 385% и border-radius на 0px. Я использовал git serve . для перезапуска своего сервера gitbook, но эффект кода не изменился.

Я получил эти файлы с ключевым словом code в каталоге темы, что я должен изменить?

.//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

Что еще мне делать?


css gitbook
person Zen    schedule 05.02.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это должен быть комментарий, но вы не можете возиться с комментариями.

Как вы можете видеть ниже, предоставленная вами информация о стиле не включает стили, которые вы хотите изменить, вы где-то упустили важную информацию.
Код, который вы включили, показан слева, проблема, которую вы описали, находится справа.

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>

person Etheryte    schedule 05.02.2015
comment
Извините, у меня нет опыта работы с css и javascript. Не могли бы вы сказать мне более ясно, что я должен сделать, чтобы это исправить? - person Zen; 05.02.2015
comment
Я хочу сказать, что вы не показали нам, откуда возникает проблема, и поэтому мы не можем сказать вам, как ее исправить. Текущий код, который вы нам показали, не воспроизводит проблему. - person Etheryte; 05.02.2015
comment
Я нашел функцию javascript, верно? Я предполагаю, что где-то еще есть какой-то файл, который вызовет эту функцию. А так как содержание функций изменилось, то и конечный визуальный результат тоже должен измениться. Не так ли? - person Zen; 05.02.2015
comment
можете ли вы дать мне какой-либо намек, основанный на вашем опыте? - person Zen; 05.02.2015
comment
Я обновил вышеуказанную скрипку. Проблема, вероятно, просто в стиле css, который унаследован откуда-то еще, но невозможно сказать откуда, не глядя на реальный сайт/источник. - person Etheryte; 05.02.2015
comment
Я обновил список найденных файлов, содержащих ключевые слова code. Какие из них, по вашему мнению, нужно изменить? - person Zen; 05.02.2015

arrow_upward
0
arrow_downward

Чтобы переопределить стили Gitbook по умолчанию, создайте файл с именем 'styles/website.css' в корне вашего проекта gitbook.

Отредактируйте файл book.json и добавьте следующее, чтобы определить источник ваших собственных стилей.

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

Все в этом файле переопределит стили Gitbook (если вы правильно укажете имена).

Затем узнайте имена html-элементов, которые вы хотите применить, или измените стили с помощью инспектора браузера. Откройте свой проект Gitbook в браузере и щелкните правой кнопкой мыши блок кода, это вызовет меню с Inspect или Inspect Element.

Вам нужно будет перезапустить gitbook serve при изменении стилей, так как он читает только файл styles/website.css при запуске.

Стили, которые я определил для замены стилей Gitbook, можно увидеть в этом Github Gist.

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

Результаты этих стилей банок можно увидеть по адресу:

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

Спасибо

person jr0cket    schedule 27.07.2016