Jekyll代码片段副本
问题
我正在用最低限度主题构建一个Jekyll站点，以在线发布一些教程。 教程页面包含许多代码片段，例如：
```javascript
/* Global scope: this code is executed once */
const redis = require('redis');
const host = <HOSTNAME>;
const port = <PORT>;
const password = <PASSWORD>;
...
```
我想为每个代码片段添加一个“复制到剪贴板”按钮（示例），但不知道在Jekyll中做什么是正确的方法。
我试过了什么
我的问题
如何在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>;
...
```
{: #code-example-1}
这将产生：
<div id="code-example-1" class="language-javascript highlighter-rouge">
....
</div>
使用jquery
代码块使用code html元素，如果我们检测到它，那么我们加载js，遍历所有添加自定义id的代码元素，以及复制其内容的按钮。 最后初始化剪贴板按钮。
{% if page.content contains "code" %}
<script>
<!-- clipboard.js code -->
</script>
{% endif %}
// get all <code> elements
var allCodeBlocksElements = $( "code" );
allCodeBlocksElements.each(function(i) {
// add different id for each code block
// target
var currentId = "codeblock" + (i + 1);
$(this).attr('id', currentId);
//trigger
var clipButton = '<button class="btn" data-clipboard-target="#' + currentId + '"><img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard"></button>';
$(this).after(clipButton);
});
new Clipboard('.btn');<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<code>print("Club Nacional de Football")</code>
<br>
<code>print("is a sports institution")</code>
<br>
<code>print("from Uruguay")</code>我们使用includes。
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' %}
_includes / code_snippet.md
{% 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>