如何正确用行号围住代码块并更新代码块CSS

Question

我正在尝试使用 Jekyll 将行号添加到 Markdown 中的受隔离代码块中。此外，我正在尝试寻找更新代码 CSS 样式的方法。

关于第一个问题，我正在尝试遵循以下线程中的说明。因此，我尝试做两件事，使用以下命令封装代码：

{% highlight python linenos %}
     <code>
 {% endhighlight %}

但是，当我这样做时，代码会出现在行计数器之后：

1
2
3
4
5
import os
import numpy as np
....

当我将 config.yml 中的以下几行更改为 true 时，也会发生相同的行为：

# Markdown and syntax highlight
markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false #true
    block:
      line_numbers: false #true
      start_line: 1

如何解决这个问题？一般来说，如何仅更改代码块的 CSS？

Answer 1

您的问题有两个问题，我们一一解答。

添加行号

向代码片段添加代码行号有两种基本的不同方法。

1. 为特定代码片段添加行号，使用

{% highlight python linenos %}
    <code>
{% endhighlight %}

2. 一般为所有代码块添加行号：

# _config.yml

markdown: kramdown
highlighter: rouge
kramdown:
  syntax_highlighter_opts:
    css_class: 'highlight'
    block:
      line_numbers: true #true
      start_line: 1

适用于使用三个反引号生成的代码块：```。

如果您需要每个代码片段中的行号，则第二种方法更有用。

造型

要为代码片段应用特定样式，您可以使用

rouge

gem 命令。

1. 使用

   rouge

   命令在本地安装

   gem install rouge

   gem。
2. 为您选择的代码突出显示样式生成样式表

rougify style monokai.sublime > syntax.css

在这里您可以找到支持的主题列表，有时单个文件中有多个主题（例如在

base16.rb

中）

3. 将语法 CSS 文件包含到您的布局中

  <link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">

4. 根据需要更新 CSS 文件，例如调整边距和填充。