Смешайте язык разметки Github с CSS

Question

Как я могу добавить CSS в язык разметки github?

Я смог сделать это, используя свойство style внутри HTML-тегов, например:

<p style="text-align: center;">This is some random text</p>

Но если я перенесу CSS в начало, например:

<style>
  p {
    text-align: center;
  }
</style>

<p>This is some random text</p>

Github не распознает его и просто выводит на экран код CSS.

Я использую Atom, и пакет Markdown Preview фактически распознает это правильно, хотя в удаленном репозитории он показывает неправильно. И то же самое делает расширение Google Chrome Markdown Preview Plus.

Есть ли способ сделать это? Написание CSS внутри HTML-тегов выглядит просто неправильно.

Answer 1

После того, как GitHub преобразует Markdown в HTML,

HTML-код очищается, агрессивно удаляя вещи, которые могут навредить вам и вашим родственникам, такие как script теги, встроенные стили и class или же id атрибутов. См. Фильтр очистки для полного белого списка.

style теги не включены в белый список GitHub, поэтому они удаляются. Я на самом деле удивлен, что встроенный style атрибуты работы; они также не включены в белый список и явно упоминаются в предыдущем параграфе.

В любом случае, GitHub не разрешает включать произвольный HTML в Markdown.

Answer 2

Вот как вы можете добиться того, что ищете. Как говорится в другом ответе, Github не поддерживает этот синтаксис, но если вы вставите этот Markdown в другой инструмент предварительного просмотра, вы увидите, что маркеры удалены из этого списка.

      |Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|

Answer 3

Вы можете тривиально переопределить то, что использует CSS Github, снабдив его собственными style.css файл, вложенный как ./assets/css/style.css (который является URL-адресом таблицы стилей, который указывается в исходном HTML-коде, который Github строит на основе вашей уценки).

Обратите внимание: если вы хотите просто «добавить» какой-либо CSS, вам нужно сначала скопировать CSS Github, чтобы вы могли создать файл с тем же содержимым, после чего разместите свои собственные правила. Вы можете найти это на любом view-source:https://username.github.io/repo-name/assets/css/style.css с очевидной заменой имени пользователя и имени репо.

Например

      /* CSS as copied from github's own stylesheet here, which is all one line anyway */

...

/* And then your own CSS */

/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }

/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }

/* let's also give images a subtle border */
img { border: 1px solid #DDD; }