Тот же стиль рендеринга, что и на странице разметки github для страницы на моем сайте jekyll

Question

Я использую jekyll для создания своего сайта и файлы уценки для создания сообщений.

Я написал код уценки для генерации http://techtaste.in/blog/markdown/markdown-quick-reference.html. И я использовал тот же контент в https://github.com/Raghavendrak555/chari.github.io/blob/master/testMarkdown.md. Эти две страницы отображаются по-разному. Бывший не имеет выделенного синтаксиса, а последний имеет.

Что я могу сделать, чтобы получить такой же вид отображения файла уценки на моем сайте, как и на сайте github.

Нужно ли связывать какой-либо конкретный файл CSS для достижения этого или какие-либо настройки конфигурации необходимы в _config.yml.

Заранее спасибо.

Answer 1

Должен ли я связать какой-либо конкретный файл CSS, чтобы добиться этого

Да, точно.

Для начала необходимо указать средство визуализации уценки и его подсветку синтаксиса. Я использую это:

markdown: kramdown
kramdown:
  syntax_highlighter: rouge

(Я не уверен, если это строго необходимо, но это то, что я делаю, и это работает для меня.)

Подсветка синтаксиса оборачивает ваш код в кучу span элементы с определенными классами в зависимости от того, какого цвета это должно быть. (На GitHub проверьте выделенный код, чтобы увидеть, о чем я говорю.) Затем вам нужно включить CSS-файлы, которые задают цвета для каждого из этих классов.

Чтобы найти эти CSS-файлы, выполните в Google поиск по запросу "rogs синтаксис с подсветкой css-файлов" или "pygments css" (rogue и pygments используют одинаковые имена классов). Вот хороший список, но в соответствии с этим вам, возможно, придется изменить одно имя класса.

Смотрите также: добавление подсветки синтаксиса к gh-страницам