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

我正在建立一个Jekyll网站，主题是在线发布一些教程。教程页面包含许多代码段，例如：

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

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

...
```

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

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

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

``javascript
/*全局范围：此代码执行一次*/
const redis=require（'redis'）；
常量主机=；
常数端口=；
常量密码=；
...
```

我想在每个代码段（）中添加一个“复制到剪贴板”按钮，但不确定在Jekyll中如何正确执行

我试过什么

• 使用。它要求每个代码段都有一个唯一的ID，我不知道如何在Jekyll/Markdown中实现这一点
• STFW

我的问题

---

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

使用kramdown的块内联属性列表为每个代码块手动生成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>;

...
```

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

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

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

//获取所有
元素
var allCodeBlocksElements=$（“代码”）；
所有代码块选择。每个（函数（i）{
//为每个代码块添加不同的id
//目标
var currentId=“代码块”+（i+1）；
$（this.attr（'id'，currentId）；
//触发
var clipButton=''；
$（此）.after（clipButton）；
});
新剪贴板（'.btn'）

print（“国家足球俱乐部”）


print（“是一家体育机构”）


打印（“来自乌拉圭”）
让我们使用

tuto.md

---
front matter things here
---
{%- capture code -%}
/* Some js code */
const redis = require('redis');
const host = <HOSTNAME>;
{%- endcapture -%}

{% include code_snippet.md code=code language='javascript' %}

{%- capture code -%}
# Some ruby code
t = Time.now
t.succ  
{%- endcapture -%}

{% include code_snippet.md code=code language='ruby' %}

{% assign code = include.code %}
{% assign language = include.language %}

``` {{ language }}
{{ code }}
```
{% assign nanosecond = "now" | date: "%N" %}
<textarea id="code{{ nanosecond }}" style="display:none;">{{ code | xml_escape }}</textarea>
<button id="copybutton{{ nanosecond }}" data-clipboard-target="#code{{ nanosecond }}">
  Copy to clipboard
</button>

<script>
var copybutton = document.getElementById('copybutton{{ nanosecond }}');
var clipboard{{ nanosecond }} = new Clipboard(copybutton);

clipboard{{ nanosecond }}.on('success', function(e) {
    console.log(e);
});
clipboard{{ nanosecond }}.on('error', function(e) {
    console.log(e);
});
</script>

---
前面的事
---
{%-捕获代码-%}
/*一些js代码*/
const redis=require（'redis'）；
常量主机=；
{%-endcapture-%}
{%include code_snippet.md code=code language='javascript'%}
{%-捕获代码-%}
#一些ruby代码
t=时间。现在
t、 成功
{%-endcapture-%}
{%include code_snippet.md code=code language='ruby'%}

\u包括/code\u snippet.md

---
front matter things here
---
{%- capture code -%}
/* Some js code */
const redis = require('redis');
const host = <HOSTNAME>;
{%- endcapture -%}

{% include code_snippet.md code=code language='javascript' %}

{%- capture code -%}
# Some ruby code
t = Time.now
t.succ  
{%- endcapture -%}

{% include code_snippet.md code=code language='ruby' %}

{% assign code = include.code %}
{% assign language = include.language %}

``` {{ language }}
{{ code }}
```
{% assign nanosecond = "now" | date: "%N" %}
<textarea id="code{{ nanosecond }}" style="display:none;">{{ code | xml_escape }}</textarea>
<button id="copybutton{{ nanosecond }}" data-clipboard-target="#code{{ nanosecond }}">
  Copy to clipboard
</button>

<script>
var copybutton = document.getElementById('copybutton{{ nanosecond }}');
var clipboard{{ nanosecond }} = new Clipboard(copybutton);

clipboard{{ nanosecond }}.on('success', function(e) {
    console.log(e);
});
clipboard{{ nanosecond }}.on('error', function(e) {
    console.log(e);
});
</script>

{%assign code=include.code%}
{%assign language=include.language%}
```{{语言}}
{{code}}
```
{%assign nanosecond=“now”|日期：“%N”%}
{{code | xml _escape}}
复制到剪贴板
var copybutton=document.getElementById（'copybutton{{{纳秒}'）；
var剪贴板{{纳秒}}=新剪贴板（复制按钮）；
剪贴板{{纳秒}}.on（'success'，函数（e）{
控制台日志（e）；
});
剪贴板{{纳秒}}.on（'error'，函数（e）{
控制台日志（e）；
});
a。有没有一种方法可以让这一切自动化？B我仍然需要手动添加复制按钮并创建事件somehow@AdamMatan您可以使用插件将其自动化，例如，使用：post_render hook，为每个语言块生成代码，或者创建一个生成它的标记。@AdamMatan我已经更新了答案，包括自动生成代码块id的代码和复制其内容的按钮。我认为您可能应该使用javascript创建按钮和id。
div
元素是我要从中复制文本的元素。jquery代码遍历每个
div
元素，添加一个唯一id和一个按钮，该按钮指向该唯一id，最后调用clipboard.js。