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

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

30 голосов
/ 07 июля 2011

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

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

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

Ответы [ 5 ]

33 голосов
/ 08 июля 2011

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

---
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 %}
8 голосов
/ 04 февраля 2016

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

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge
2 голосов
/ 13 марта 2017

Как отметил @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");
}
```
2 голосов
/ 12 марта 2014

Нашел этот поток как первый хит при попытке выяснить подсветку синтаксиса, и я нашел еще более простой способ сделать это, который я поделилсяПросто поместите название нужного языка после выделенных блоков кода ( ссылка ).Нет необходимости создавать какие-либо 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'
```
1 голос
/ 08 июня 2018

Подсветкой синтаксиса по умолчанию является rouge (эквивалентно 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>

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

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

...