v0.4.0

* Support dark mode
  * Add `bookcase_cover_src_dark` for bookcase layout
  * Add `balloon_img_src_dark` for balloon layout
  * Add shortcode: svg-wrapper
* Prism.js integration (v1.23.0)
* Code copy feature for code block

README.md

@@ -30,12 +30,20 @@ See [Configuration](https://kaiiiz.github.io/hugo-theme-graytr/configuration/)
 
 **Responsive Layout**
 
-**Support Nested Menu**
+**Nested Menu**
+
+**Dark mode**
+
+**Syntax Highlighting (with copy feature)**
+
+* Chroma (built-in)
+* Prism.js
 
 ## ❤️ Acknowledgement
 
 * [Hugo](https://gohugo.io/) for awesome CMS framework written by [golang](https://golang.org/)
 * [tailwindcss](https://tailwindcss.com/) for awesome utility-first CSS framework
+* [Prism.js](https://prismjs.com/index.html)
+* [lgarron/clipboard-polyfill](https://github.com/lgarron/clipboard-polyfill)
 * Icons made by [Freepik](https://www.freepik.com) from [Flaticon](https://www.flaticon.com)
 * Material icons made by Google from [Material Design](https://material.io/resources/icons/)
-

assets/css/components/article.pcss

@@ -0,0 +1,166 @@
+
+article {
+  line-height: 1.7;
+
+  > *:first-child {
+    @apply mt-0;
+  }
+
+  > *:last-child {
+    @apply mb-0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold mt-8 mb-4;
+  }
+
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  h4 {
+    @apply text-md;
+  }
+
+  h5 {
+    @apply text-base;
+  }
+
+  h6 {
+    @apply text-sm;
+  }
+
+  hr {
+    @apply my-6;
+  }
+
+  p {
+    @apply my-4;
+    overflow-wrap: break-word;
+  }
+
+  li {
+    @apply list-disc my-2;
+
+    p {
+      @apply my-0;
+    }
+  }
+
+  ul {
+    @apply pl-5 my-4;
+
+    ul, ol {
+      @apply my-0;
+    }
+  }
+
+  ol {
+    @apply pl-5 my-4;
+
+    li {
+      @apply list-decimal;
+    }
+
+    ul, ol {
+      @apply my-0;
+    }
+  }
+
+  blockquote {
+    @apply px-4 my-6 mx-0 border-l-2;
+
+    p:first-child {
+      @apply mt-0;
+    }
+
+    p:last-child {
+      @apply mb-0;
+    }
+
+    blockquote {
+      @apply my-0;
+    }
+  }
+
+  code {
+    @apply rounded px-1.5 py-0.75;
+  }
+
+  pre {
+    @apply overflow-auto leading-relaxed p-4 my-6 rounded;
+
+    code {
+      @apply p-0;
+    }
+  }
+
+  .highlight {
+    @apply my-6 relative;
+
+    .code-toolbar {
+      @apply p-0;
+
+      pre {
+        @apply py-4;
+      }
+    }
+
+    > div,
+    > pre {
+      @apply p-3 rounded-md;
+
+      pre {
+        @apply p-0 m-0;
+
+        code {
+          @apply p-0;
+        }
+      }
+    }
+  }
+
+  .copy-code-button {
+    @apply absolute right-0 text-xs px-1.5 rounded;
+    height: 1.5rem;
+    top: -1.5rem;
+  }
+
+  table {
+    @apply my-6 table-auto border-collapse block overflow-x-auto;
+
+    td, th {
+      @apply border px-3 py-2;
+    }
+  }
+
+  figure {
+    @apply my-4 text-center sm:-mx-5;
+
+    figcaption {
+      @apply my-2;
+    }
+  }
+
+  img {
+    @apply mx-auto;
+  }
+
+  &.no-expand {
+    .highlight {
+      @apply sm:mx-0;
+    }
+
+    figure {
+      @apply sm:mx-0;
+    }
+  }
+}