Кнопка копирования в буфер обмена фрагмента кода Jekyll

Question

Эта проблема

Я создаю сайт Jekyll с минимальной темой, чтобы опубликовать некоторые учебники в Интернете. Страницы учебника содержат много фрагментов кода, например:

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

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

...
```

Я хотел бы добавить кнопку "копировать в буфер обмена" в каждый фрагмент кода ( пример), но не уверен, как правильно сделать это в Jekyll.

Что я пробовал

• Используя https://clipboardjs.com/. Для каждого фрагмента требуется уникальный идентификатор, и я не уверен, как реализовать это в Jekyll / Markdown.
• STFW

Мой вопрос

Как добавить кнопку "Копировать в буфер обмена" для фрагментов кода в Jekyll?

Answer 1

Вручную генерируйте идентификаторы для каждого блока кода с помощью встроенных списков атрибутов kramdown, добавляя {: #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, просматриваем все элементы кода, добавляем собственный идентификатор и кнопку, чтобы скопировать их содержимое. Наконец, инициализируйте кнопки буфера обмена.

{% 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>

Answer 2

Давайте использовать включает.

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>