style(core): avoid using < or > within capture tag

This interferes with the work of the editor Liquid-HTML plugin

_includes/refactor-content.html

@@ -32,11 +32,9 @@
 <!-- Change the icon of checkbox -->
 {% if _content contains '<input type="checkbox"' %}
   {% assign _content = _content
-    | replace:
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
       '<i class="fas fa-check-circle fa-fw checked"></i>'
-    | replace:
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
       '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
@@ -45,7 +43,7 @@
 {% assign IMG_TAG = '<img ' %}
 
 {% if _content contains IMG_TAG %}
-  {% assign _img_content = nil %}
+  {% assign _img_content = null %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
   <!-- CDN URL -->
@@ -81,10 +79,10 @@
     {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
     {% assign _attrs = _left | split: '" ' %}
 
-    {% assign _width = nil %}
+    {% assign _width = null %}
-    {% assign _height = nil %}
+    {% assign _height = null %}
-    {% assign _lqip = nil %}
+    {% assign _lqip = null %}
-    {% assign _class = nil %}
+    {% assign _class = null %}
 
     {% for _attr in _attrs %}
       {% unless _attr contains '=' %}
@@ -115,7 +113,7 @@
       {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
-    {% assign _final_src = nil %}
+    {% assign _final_src = null %}
 
     {% unless _src contains '//' %}
       {% assign _final_src = _path_prefix | append: _src %}
@@ -160,9 +158,8 @@
 
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {%- capture _wrapper_start -%}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
-        <div class="preview-img {{ _class | strip }}">
+
-      {%- endcapture -%}
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
 
@@ -179,9 +176,14 @@
         {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
       {% else %}
         <!-- create the image wrapper -->
-        {%- capture _wrapper_start -%}
+        {% assign _wrapper_start = _final_src
-          <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+          | default: _src
-        {%- endcapture -%}
+          | prepend: '<a href="'
+          | append: '" class="popup img-link '
+          | append: _class
+          | append: '">'
+        %}
+
         {% assign _img_content = _img_content | append: _wrapper_start %}
         {% assign _right = _right | prepend: '></a' %}
       {% endif %}
@@ -189,13 +191,11 @@
 
     <!-- combine -->
     {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
-
   {% endfor %}
 
   {% if _img_content %}
     {% assign _content = _img_content %}
   {% endif %}
-
 {% endif %}
 
 <!-- Add header for code snippets -->
@@ -205,12 +205,10 @@
   {% 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="' %}
@@ -226,7 +224,8 @@
         <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
-      {% assign _new_content = _new_content | append: _snippet
+      {% assign _new_content = _new_content
+        | append: _snippet
         | append: '<div class="code-header">'
         | append: _label
         | append: '<button aria-label="copy" data-title-succeed="'
@@ -234,13 +233,10 @@
         | append: '"><i class="far fa-clipboard"></i></button></div>'
         | append: '<div class="highlight"><code>'
       %}
-
     {% endif %}
-
   {% endfor %}
 
   {% assign _content = _new_content %}
-
 {% endif %}
 
 <!-- Create heading anchors -->
@@ -249,11 +245,11 @@
 {% assign _heading_content = _content %}
 
 {% for level in heading_levels %}
-  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
+  {% assign mark_start = '<h' | append: level | append: ' id="' %}
-  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+  {% assign mark_end = '</h' | append: level | append: '>' %}
 
   {% if _heading_content contains mark_start %}
-    {% assign _new_content = nil %}
+    {% assign _new_content = null %}
     {% assign heading_snippets = _heading_content | split: mark_start %}
 
     {% for snippet in heading_snippets %}
@@ -263,20 +259,19 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% 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
+      {% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
-          | append: left | append: anchor | append: right
-      %}
-
     {% endfor %}
 
     {% assign _heading_content = _new_content %}
-
   {% endif %}
 {% endfor %}