Jekyll Code代码段复制到剪贴板按钮

Question

问题

我正在构建一个具有最小主题的Jekyll网站,以在线发布一些教程.教程页面包含许多代码片段,例如:

```javascript
/* Global scope: this code is executed once */
const redis = require('redis');

const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;

...
```

我想在每个代码片段(示例)中添加"复制到剪贴板"按钮,但不确定在Jekyll中执行此操作的正确方法是什么.

我试过了什么

• 使用clipboardjs.com.它需要每个代码段的唯一ID,我不知道如何在Jekyll/Markdown中实现它.
• STFW

我的问题

如何在Jekyll中为代码片段添加"复制到剪贴板"按钮？

Answer 1

使用 kramdown 的Block Inline Attribute Lists为每个代码块手动生成 id ，添加{: #code-example-1}在其后。

在你的例子中：

```javascript
/* Global scope: this code is executed once */
const redis = require('redis');

const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;

...
```
{: #code-example-1}

这将产生：

<div id="code-example-1" class="language-javascript highlighter-rouge">
....
</div>

使用jQuery

代码块使用codehtml 元素，如果我们检测到它，那么我们加载 js，遍历所有代码元素，添加一个自定义 id 和一个按钮来复制它们的内容。最后初始化剪贴板按钮。

{% if page.content contains "code" %}
<script>
<!-- clipboard.js code -->
</script>
{% endif %}

```javascript
/* Global scope: this code is executed once */
const redis = require('redis');

const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;

...
```
{: #code-example-1}

<div id="code-example-1" class="language-javascript highlighter-rouge">
....
</div>