fix: Notice Shortcodes Don't Render #398

assets/sass/_shortcodes/_notice.scss

@@ -0,0 +1,60 @@
+// ==============================
+// Shortcode Notice
+// ==============================
+
+.notice {
+  margin: 1em 0;
+
+  &__content {
+    padding: 0.6em 1em;
+    display: block;
+    font-size: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #666;
+  }
+
+  &__title {
+    color: #fff;
+    padding: 0.5em 1em;
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  // 注意类型样式
+  &--note {
+    .notice__title {
+      background-color: #6AB0DE;
+    }
+    .notice__content {
+      background: #E7F2FA;
+    }
+  }
+
+  &--tip {
+    .notice__title {
+      background-color: rgba(92, 184, 92, 0.8);
+    }
+    .notice__content {
+      background: #E6F9E6;
+    }
+  }
+
+  &--info {
+    .notice__title {
+      background-color: #F0B37E;
+    }
+    .notice__content {
+      background: #FFF2DB;
+    }
+  }
+
+  &--warning {
+    .notice__title {
+      background-color: rgba(217, 83, 79, 0.8);
+    }
+    .notice__content {
+      background: #FAE2E2;
+    }
+  }
+}

assets/sass/jane.scss

@@ -204,6 +204,11 @@ $mobile-breakpoint: 768px !default;
  *------------------------------------------------------------------------**/
 @import "_components/card";
 
+/**------------------------------------------------------------------------
+ *                           shortcodes
+ *------------------------------------------------------------------------**/
+@import "_shortcodes/notice";
+
 /**------------------------------------------------------------------------
  *                           custom styles
  *------------------------------------------------------------------------**/

dev-config.toml

@@ -218,6 +218,8 @@ defaultContentLanguage = "en"  # Default language to use (if you setup multiling
 
 # Highlight options. See https://gohugo.io/content-management/syntax-highlighting/
 [markup]
+  [markup.goldmark.renderer]
+    unsafe = true
   [markup.highlight]
     anchorLineNos = true
     codeFences = true

layouts/shortcodes/notice.html

@@ -1,10 +1,15 @@
-<div class="shortcode-notice {{ .Get 0 }}">
-  <div class="shortcode-notice-title {{ .Get 0 }}">
+{{/*
+  You should set unsafe = true in config.toml
+  see: https://discourse.gohugo.io/t/raw-html-getting-omitted-in-0-60-0/22032/4
+*/}}
+
+<div class="notice notice--{{ .Get 0 }}">
+  <div class="notice__title">
     {{- if len .Params | eq 2 -}}
-      {{ .Get 1 }}
+    {{ .Get 1 }}
     {{ else }}
-      {{ .Get 0 }}
+    {{ .Get 0 }}
     {{- end -}}
   </div>
-  <div class="notice-content">{{ .Inner | markdownify }}</div>
-</div>
+  <div class="notice__content">{{ .Inner | markdownify }}</div>
+</div>