Something went wrong. Try again.
Joseph Hale's Technical Blog
Something went wrong. Try again.
8.4 kB · 255 lines
HTML
at content
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256<!-- Refactor the HTML structure -->
{% assign _content = include.content %}
<!-- In order to allow a wide table to scroll horizontally, we suround the markdown table with `<div class="table-wrapper">` and `</div>`-->
{% if _content contains '<table' %} {% assign _content = _content | replace: '<table', '<div class="table-wrapper"><table' | replace: '</table>', '</table></div>' | replace: '<code><div class="table-wrapper">', '<code>' | replace: '</table></div></code>', '</table></code>' %}{% endif %}
<!-- Fixed kramdown code highlight rendering: https://github.com/penibelst/jekyll-compress-html/issues/101 https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901-->
{% if _content contains '<pre class="highlight">' %} {% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' | replace: '</code></pre></div>', '</code></div>' %}{% endif %}
<!-- Change the icon of checkbox -->
{% if _content contains '<input type="checkbox"' %} {% assign _content = _content | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />', '<i class="fas fa-check-circle fa-fw checked"></i>' | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />', '<i class="far fa-circle fa-fw"></i>' %}{% endif %}
<!-- Handle images -->
{% assign IMG_TAG = '<img ' %}
{% if _content contains IMG_TAG %} {% assign _img_content = null %} {% assign _img_snippets = _content | split: IMG_TAG %}
{% for _img_snippet in _img_snippets %} {% if forloop.first %} {% assign _img_content = _img_snippet %} {% continue %} {% endif %}
{% assign _left = _img_snippet | split: '>' | first %} {% assign _right = _img_snippet | remove: _left %}
{% unless _left contains 'src=' %} {% continue %} {% endunless %}
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} {% assign _attrs = _left | split: '" ' %}
{% assign _src = null %} {% assign _lqip = null %} {% assign _class = null %}
{% for _attr in _attrs %} {% unless _attr contains '=' %} {% continue %} {% endunless %}
{% assign _pair = _attr | split: '="' %} {% capture _key %}{{ _pair | first }}{% endcapture %} {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
{% case _key %} {% when 'src' %} {% assign _src = _value %} {% when 'lqip' %} {% assign _lqip = _value %} {% when 'class' %} {% assign _class = _value %} {% endcase %} {% endfor %}
<!-- take out classes --> {% if _class %} {% capture _old_class %}class="{{ _class }}"{% endcapture %} {% assign _left = _left | remove: _old_class %} {% endif %}
{% assign _final_src = null %} {% assign _lazyload = true %}
{%- capture _img_url -%} {% include img-url.html src=_src img_path=page.img_path %} {%- endcapture -%}
{% assign _path_prefix = _img_url | remove: _src %}
{% unless _src contains '//' %} {% assign _final_src = _path_prefix | append: _src %} {% assign _src_alt = 'src="' | append: _path_prefix %} {% assign _left = _left | replace: 'src="', _src_alt %} {% endunless %}
{% if _lqip %} {% assign _lazyload = false %} {% assign _class = _class | append: ' blur' %}
{% unless _lqip contains 'data:' %} {% assign _lqip_alt = 'lqip="' | append: _path_prefix %} {% assign _left = _left | replace: 'lqip="', _lqip_alt %} {% endunless %}
<!-- add image placeholder --> {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
{% else %} {% assign _class = _class | append: ' shimmer' %} {% endif %}
<!-- lazy-load images --> {% if _lazyload %} {% assign _left = _left | append: ' loading="lazy"' %} {% endif %}
{% if page.layout == 'home' %} <!-- create the image wrapper --> {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
{% assign _img_content = _img_content | append: _wrapper_start %} {% assign _right = _right | prepend: '></div' %}
{% else %} <!-- make sure the `<img>` is wrapped by `<a>` --> {% assign _parent = _right | slice: 1, 4 %}
{% if _parent == '</a>' %} <!-- add class to exist <a> tag --> {% assign _size = _img_content | size | minus: 1 %} {% capture _class %} class="img-link{% unless _lqip %} shimmer{% endunless %}" {% endcapture %} {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
{% else %} <!-- create the image wrapper --> {% assign _wrapper_start = _final_src | default: _src | prepend: '<a href="' | append: '" class="popup img-link ' | append: _class | append: '">' %}
{% assign _img_content = _img_content | append: _wrapper_start %} {% assign _right = '></a' | append: _right %} {% endif %} {% endif %}
<!-- combine --> {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} {% endfor %}
{% if _img_content %} {% assign _content = _img_content %} {% endif %}{% endif %}
<!-- Add header for code snippets -->
{% 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 %}
{% else %} {% assign _left = _snippet | split: '><' | last %}
{% if _left contains 'file="' %} {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %} {% assign _label_icon = 'far fa-file-code fa-fw' %} {% else %} {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %} {% assign _label_icon = 'fas fa-code fa-fw small' %} {% endif %}
{% capture _label %} <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span> {% endcapture %}
{% assign _new_content = _new_content | append: _snippet | append: '<div class="code-header">' | append: _label | append: '<button aria-label="copy" data-title-succeed="' | append: site.data.locales[include.lang].post.button.copy_code.succeed | append: '"><i class="far fa-clipboard"></i></button></div>' | append: '<div class="highlight"><code>' %} {% endif %} {% endfor %}
{% assign _content = _new_content %}{% endif %}
<!-- Create heading anchors -->
{% assign heading_levels = '2,3,4,5' | split: ',' %}{% assign _heading_content = _content %}
{% for level in heading_levels %} {% assign mark_start = '<h' | append: level | append: ' id="' %} {% assign mark_end = '</h' | append: level | append: '>' %}
{% if _heading_content contains mark_start %} {% assign _new_content = null %} {% assign heading_snippets = _heading_content | split: mark_start %}
{% for snippet in heading_snippets %} {% if forloop.first %} {% assign _new_content = snippet %} {% continue %} {% endif %}
{% assign id = snippet | split: '"' | first %} {% assign anchor = '<a href="#' | append: id | append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>' %}
{% assign left = snippet | split: mark_end | first %} {% assign right = snippet | slice: left.size, snippet.size %} {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
{% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %} {% endfor %}
{% assign _heading_content = _new_content %} {% endif %}{% endfor %}
{% assign _content = _heading_content %}
<!-- return -->{{ _content }}