<!-- 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: '</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 %} <!-- Add attribute 'hide-bullet' to the checkbox list --> {% if _content contains '<li class="task-list-item"><' %} {% assign _content = _content | replace: '"task-list-item"><', '"task-list-item" hide-bullet><' %} {% endif %} <!-- images --> {% if _content contains '<img src="' %} <!-- add CDN prefix if it exists --> {% if site.img_cdn != '' %} {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %} {% else %} {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %} {% endif %} {% assign _content = _content | replace: '<img src="/', img_path_replacement %} <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> --> {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %} <!-- add image placehoder to prevent layout reflow --> {% assign _img_content = nil %} {% assign _images = _content | split: '<img ' %} {% for _img in _images %} {% if forloop.first %} {% assign _img_content = _img %} {% continue %} {% endif %} {% assign _width = nil %} {% assign _height = nil %} {% assign _attrs = _img | split: '>' | first | split: ' ' %} {% for _attr in _attrs %} {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %} {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %} {% case _key %} {% when 'width' %} {% assign _width = _value %} {% when 'height' %} {% assign _height = _value %} {% endcase %} {% if _width and _height %} {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %} {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %} {% break %} {% endif %} {% endfor %} {% unless _width and _height %} {% assign _img_content = _img_content | append: '<img ' | append: _img %} {% endunless %} {% endfor %} {% assign _content = _img_content %} {% 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 _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_code.succeed | append: '"><i class="far fa-clone"></i></button></div>' | append: '<div class="highlight"><code>' %} {% endif %} {% endfor %} {% assign _content = _new_content %} {% endif %} <!-- return --> {{ _content }}