add highlight box

highlight/README.md

@@ -0,0 +1,31 @@
+# Highlight boxes in Hugo
+
+## Install
+
+1. Add the shortcode files to `layouts/shortcodes`
+2. Add the css code to your project
+3. Add the icon vector files in your project to `/static`
+
+## Usage
+
+```hugo
+{{< highlight/info >}}
+    This is a highlighted text
+{{< /highlight/info >}}
+```
+
+```hugo
+{{< highlight/warning >}}
+    Make sure the Public Key is known to the Git Server.
+{{< /highlight/warning >}}
+```
+
+```hugo
+{{< highlight/critical >}}
+    This is a highlighted text
+{{< /highlight/critical >}}
+```
+
+## Preview
+
+![Highlight Boxes in Hugo](highlights.png)

highlight/css/style.css

@@ -0,0 +1,40 @@
+.highlight-box {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+}
+
+.highlight-box::before {
+    content: "";
+    display: block;
+    width: 25px;
+    height: 25px;
+    float: left;
+    margin: 0 6px 0 0;
+}
+
+.info {
+    background-color: #242930;
+}
+
+.info::before {
+    background: url("/highlight_info.svg") no-repeat;
+}
+
+.warning {
+    background-color: #d8b92e; 
+    color: #202429;
+}
+
+.warning::before {
+    background: url("/highlight_warning.svg") no-repeat;
+}
+
+.critical {
+    background-color: #d82e2e; 
+    color: #202429;
+}
+
+.critical::before {
+    background: url("/highlight_critical.svg") no-repeat;
+}

highlight/shortcodes/highlight/critical.html

@@ -0,0 +1,3 @@
+<div class="highlight-box critical">
+    {{.Inner}}
+</div>

highlight/shortcodes/highlight/info.html

@@ -0,0 +1,3 @@
+<div class="highlight-box info">
+    {{.Inner}}
+</div>

highlight/shortcodes/highlight/warning.html

@@ -0,0 +1,3 @@
+<div class="highlight-box warning">
+    {{.Inner}}
+</div>

highlight/static/highlight_critical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#202429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

highlight/static/highlight_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

highlight/static/highlight_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#202429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>