github - tag - Añadir resaltado de sintaxis a las páginas gh

github create tag

Question

¿Hay una manera fácil de agregar resaltado de sintaxis a las distintas páginas gh de mis plugins usando los Pygments de github?

Sé que cada página se ejecuta a través del motor Jekyll y proporciona resaltado de sintaxis ( ref ). Pero no quiero instalar un blog. Solo quiero resaltar la sintaxis aplicada a los bloques de código en mi gh-páginas.

Supongo que siempre podría incluir un complemento diferente en mis páginas gh ...

Answer 1

Como lo señaló @David Douglas, "GitHub Pages ahora solo admite Rouge, un resaltador de sintaxis de Ruby puro"

Tienes que poner esto en ti _config.yml . Esto es del _config.yml de Barry Clark''s Jekyll Now

# 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''

Luego para el código resaltando parte ...

La lista de alias de idioma para Rouge se enumera aquí: github.com/jneen/rouge/wiki/…

Utiliza latters en minúsculas.

Por ejemplo, para JavaScript:

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

Answer 2

El resaltador de sintaxis predeterminado es rojo (equivalente a highlighter: rouge coloreado en su archivo _config.yml). Con rouge, si escribes un bloque de código como este en markdown:

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

Puedes esperar obtener un bloque HTML como este:

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

Entonces todo lo que necesitas es un archivo CSS (si estás usando un Tema de Páginas GitHub, obtendrás el CSS automáticamente). No estoy seguro de dónde se supone que proviene oficialmente el CSS, pero

• aquí hay un archivo CSS para un fondo claro
• aquí hay un archivo CSS para el código en un rectángulo oscuro redondeado (el resto del sitio puede usar un fondo claro u oscuro).

Siéntete libre de personalizar el css a tu gusto.

Answer 3

Encontré este hilo como el primer golpe al intentar averiguar el resaltado de sintaxis, y encontré una forma aún más fácil de hacerlo que pensé que compartiría. Simplemente coloque el nombre del idioma que desea resaltar después de los bloques de código cercados ( reference ). No es necesario generar ningún CSS o usar 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 4

Las páginas ya tienen pygments, no hay nada que instalar. ¡Solo úsalo!

---
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 5

"Las páginas de GitHub ahora solo son compatibles con Rouge, un resaltador de sintaxis de Ruby puro " por lo que solo necesita cambiar el resaltador de sintaxis "kramdown" para usar "rouge" en su archivo _config.yml .

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge