Add custom title to code block

This commit is contained in:
Cotes Chung 2021-09-15 22:50:28 +08:00
parent 42ff0f2282
commit beabb36d7f
2 changed files with 36 additions and 19 deletions

View File

@ -104,30 +104,39 @@
<!-- Add header for code snippets -->
{% if _content contains '<div class="language-' %}
{% assign _code_splits = _content | split: '<div class="language-' %}
{% assign _new_content = nil %}
{% if _content contains '<div class="highlight"><code>' %}
{% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
{% assign _new_content = '' %}
{% for _snippet in _code_spippets %}
{% if forloop.last %}
{% assign _new_content = _new_content | append: _snippet %}
{% for _snippet in _code_splits %}
{% if forloop.first %}
{% assign _new_content = _snippet %}
{% else %}
{% assign _lang = _snippet | split: ' ' | first %}
{% capture _tag_head %}<div class="language-{% endcapture %}
{% assign _replacement = '-rouge"><div class="code-header" data-lang="'
| append: _lang
{% assign _left = _snippet | split: '><' | last%}
{% if _left contains 'file="' %}
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
{% else %}
{% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
{% endif %}
{% assign _new_content = _new_content | append: _snippet
| append: '<div class="code-header" text-data="'
| append: _text
| append: '"><button data-original-title="'
| append: site.data.locales[lang].post.button.copy
| append: '"><i class="far fa-clone"></i></button></div><div class="highlight">'
| append: '"><i class="far fa-clone"></i></button></div>'
| append: '<div class="highlight"><code>'
%}
{% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
{% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}
{% endif %}
{% endfor %}
{% if _new_content %}
{% assign _content = _new_content %}
{% endif %}
{% endif %}

View File

@ -172,14 +172,22 @@ div {
align-items: center;
line-height: 1.85rem;
// language badge
// text data
&::before {
content: attr(data-lang);
content: attr(text-data);
color: var(--lang-badge-color);
padding-left: 1em;
// language
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
padding-left: 1em;
// file name
@at-root [file] #{&} {
font-size: 0.85rem;
text-transform: none;
}
}
// clipboard