[feature]: hint shortcode, close #2

content/reference/markdown: example of usage hints
templates/shortcodes: implementation hint

content/reference/markdown-syntax.md

@@ -169,7 +169,21 @@ $$
 
 ![Media CDN](https://plchldr.co/i/1280x720?bg=2ecc40)
 
-{% hint style="warning" %} 123 {% endhint %}
+## Hints
+
+{% hint(style="warning") %} 
+123
+{% end %}
+
+{% hint() %}
+You can use the underscore operator in any position in the variables list to infer a type argument.
+{% end %}
+
+{% hint(style="critical") %} 
+This feature might require plugin developers to take migration steps for their existing plugins.
+
+Learn how to prepare your plugin for the update in this YouTrack issue.
+{% end %}
 
 [^1]:
 The above quote is excerpted from Rob Pike's

sass/_article.scss

@@ -128,6 +128,36 @@ article {
   img {
     height: auto;
   }
+  blockquote.hint {
+       display: grid;
+       grid-template-columns: 0.1fr 1fr;
+       max-width: 100%;
+       padding: 15px;
+       overflow: hidden;
+       border: none;
+       svg {
+         width: 25px;
+         height: 25px;
+       }
+       p {
+        text-align: center;
+        opacity: 85%;
+        font-weight: inherit;
+        font-size: 16px;
+       }
+  }
+  blockquote.warning {
+        background: $yellow;
+        color: var(--black);
+  }
+  blockquote.note {
+        background: $blue;
+        color: var(--white);
+  }
+  blockquote.critical {
+      background: $red;
+      color: var(--white);
+}
 }
 
 .sections {

templates/shortcodes/hint.html

+{% set style = style | default(value="note")  %}
+<blockquote class="hint {{ style }}">
+    {% if style == "warning" %}
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="none" d="M14.875 8h2.25v11h-2.25ZM16 25a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25Z"></path><path fill="currentColor" d="M30.85 15.449L23.888 3.532A1.069 1.069 0 0 0 22.964 3H9.036a1.069 1.069 0 0 0-.923.532L1.15 15.45a1.093 1.093 0 0 0 0 1.102l6.964 11.917a1.069 1.069 0 0 0 .923.532h13.928a1.069 1.069 0 0 0 .923-.532L30.85 16.55a1.093 1.093 0 0 0 0-1.102ZM14.876 8h2.25v11h-2.25ZM16 25a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25Z"></path></svg>
+        {% elif style == "critical" %}
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="none" d="M16 26a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 26Zm-1.125-5h2.25v-9h-2.25Z"></path><path fill="currentColor" d="M16.002 6.171h-.004L4.648 27.997l.003.003h22.698l.002-.003ZM14.875 12h2.25v9h-2.25ZM16 26a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 26Z"></path><path fill="currentColor" d="M29 30H3a1 1 0 0 1-.887-1.461l13-25a1 1 0 0 1 1.774 0l13 25A1 1 0 0 1 29 30ZM4.65 28h22.7l.001-.003L16.002 6.17h-.004L4.648 27.997Z"></path></svg>
+        {% else %}
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M17 22v-8h-4v2h2v6h-3v2h8v-2h-3zM16 8a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 8z"></path><path fill="currentColor" d="M26 28H6a2.002 2.002 0 0 1-2-2V6a2.002 2.002 0 0 1 2-2h20a2.002 2.002 0 0 1 2 2v20a2.002 2.002 0 0 1-2 2ZM6 6v20h20V6Z"></path></svg>
+    {% endif %}
+   <p> {{ body | safe }} </p>
+</blockquote>