Добавить подсветку синтаксиса для gh-страниц

Question

Есть ли простой способ добавить подсветку синтаксиса на gh-страницы моего плагина, используя Python в github?

Я знаю, что каждая страница проходит через движок Jekyll и обеспечивает подсветку синтаксиса ( ссылка). Но я не хочу устанавливать блог. Я просто хочу, чтобы подсветка синтаксиса применялась к блокам кода в моих gh-страницах.

Я думаю, я всегда мог бы просто включить другой плагин с моими gh-страницами...

Answer 1

Страницы уже делают фрагменты, нечего устанавливать. Просто используйте это!

---
layout: default
title: Something with codes
---

Happy fun highlighting. 
[More details](https://github.com/mojombo/jekyll/wiki/liquid-extensions)

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

Answer 2

" GitHub Pages теперь поддерживает только Rouge, подсветку синтаксиса на чистом Ruby ", поэтому вам нужно всего лишь изменить подсветку синтаксиса "kramdown", чтобы использовать "rouge" в файле _config.yml.

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Answer 3

Как отметил @David Douglas, "GitHub Pages теперь поддерживает только Rouge, подсветку синтаксиса на Ruby"

Вы должны положить это в себя _config.yml, Это из _config.yml Джекила Барри Кларка Сейчас

# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
    # Use GitHub flavored markdown, including triple backtick fenced code blocks
    input: GFM
    # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
    syntax_highlighter: rouge
    syntax_highlighter_opts:
        # Use existing pygments syntax highlighting css
        css_class: 'highlight'

---

Тогда для части выделения кода...

Список псевдонимов языка для Rouge приведен здесь: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers

Используются строчные буквы.

Например, для JavaScript:

``` javascript
function test() {
    console.log("test");
}
```

Answer 4

Нашел этот поток первым хитом при попытке выяснить подсветку синтаксиса, и я нашел еще более простой способ сделать это, которым я поделился. Просто поместите название языка, который вы хотите выделить, после выделенных блоков кода ( ссылка). Нет необходимости создавать какие-либо CSS или использовать YAML.

This is regular text

```ruby
# This is highlighted code
def foo
  puts 'foo'
end
```
```python
# Here is some in python
def foo():
  print 'foo'
```

Answer 5

Подсветка синтаксиса по умолчанию - румяна (эквивалентно highlighter: rouge в вашем файле _config.yml). С помощью Rouge, если вы напишите кодовый блок, подобный этому, в уценке:

~~~js
let z = 26;
~~~

Вы можете ожидать получить HTML-блок, подобный этому:

<div class="language-js highlighter-rouge">
 <div class="highlight">
  <pre class="highlight"><code>
   <span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
  </code></pre>
 </div>
</div>

Тогда все, что вам нужно, это файл CSS (если вы используете GitHub Pages Theme, вы получите CSS автоматически). Я не уверен, откуда официально должен появиться CSS, но

• вот CSS файл для светлого фона
• Вот CSS-файл для кода с темным закругленным прямоугольником (остальная часть сайта может использовать светлый или темный фон).

Не стесняйтесь настраивать CSS по своему вкусу.