Add custom title to code block
This commit is contained in:
parent
42ff0f2282
commit
beabb36d7f
2 changed files with 36 additions and 19 deletions
|
@ -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 %}
|
||||
{% assign _content = _new_content %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue