css - 在 kramdown 中使用适当的缩进将代码块嵌入到列表项中

Question

我需要在 kramdown 的列表项中嵌入一个代码块。代码块由 Pygments 突出显示。
结果如下图所示。我希望代码块向右移动以证明它是列表元素的一部分。 kramdown 文档使用fenced block 样式，它不适用于我的Jekyll 站点，所以我使用另一个:

{% highlight robotframework %}
...
{% endhighlight %}

这种方式如何自动控制缩进？
感谢您的任何建议。

Answer 1

kramdown 支持列表中的围栏代码块。

根据 Planet Jekyll FAQ ，关键是缩进你的围栏代码块与列表项对齐。还需要在围栏 block 的上方和下方放置一个分隔换行符:

Q: How can I get backtick fenced code blocks (e.g. ```) working inside lists (with kramdown)?

The gist is that the indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. Huh?

Let's use some examples (note the leading spaces get replaced with dots e.g. · to help along):

Bulleted List

*·some text     =>  use 2 spaces indentation e.g.

  ```
  $ gem install beerdb
  ```

*···some text   =>  use 4 spaces indentation e.g.

    ```
    $ gem install beerdb
    ```

Numbered List

1.·some text    =>  use 3 spaces indentation e.g.

   ```
   $ gem install beerdb
   ```

==> If you line up the fenced code block with the "natural" list indentation, it will work.

For more examples, see the syntax highlighter sandbox list page - (source).