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

Question

问题

我正在使用 minima 构建 Jekyll 网站主题在线发布一些教程。教程页面包含许多代码片段，例如:

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

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

...
```

我想向每个代码片段添加一个“复制到剪贴板”按钮 ( example )，但不确定在 Jekyll 中执行此操作的正确方法是什么。

我尝试了什么

• 使用clipboardjs.com 。它需要每个片段都有一个唯一的 ID，我不确定如何在 Jekyll/Markdown 中实现这一点。
• STFW

我的问题

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

Answer 1

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