diff --git a/themes/hugo-w2ng/assets/css/site.css b/themes/hugo-w2ng/assets/css/site.css
index 525c2bc..528969b 100644
--- a/themes/hugo-w2ng/assets/css/site.css
+++ b/themes/hugo-w2ng/assets/css/site.css
@@ -32,4 +32,17 @@
 
 #header_logo {
   font-family: "Virgil";
+}
+
+/* fix katex and tailwind base style confilt */
+span.math span {
+  @apply border-black;
+}
+
+/* shortcode expand */
+.book-expand .book-expand-content {
+  @apply hidden;
+}
+.book-expand input[type="checkbox"]:checked + .book-expand-content {
+  @apply block;
 }
\ No newline at end of file
diff --git a/themes/hugo-w2ng/assets/css/styles.css b/themes/hugo-w2ng/assets/css/styles.css
index 5699a11..080e99f 100644
--- a/themes/hugo-w2ng/assets/css/styles.css
+++ b/themes/hugo-w2ng/assets/css/styles.css
@@ -45,19 +45,14 @@
 .markdown td {
   @apply p-1;
 }
-.markdown thead,
-.markdown tfoot,
-.markdown tr:nth-child(even) {
-  @apply bg-gray-200;
-}
 .markdown pre {
-  @apply overflow-x-auto p-4 border border-solid border-gray-400 shadow-lg;
+  @apply overflow-x-auto p-4 border border-solid border-black my-4;
 }
 .markdown code {
-  @apply bg-gray-200 font-mono text-lg;
+  @apply  border-dashed border-b border-black px-1 font-mono text-lg;
 }
 .markdown pre code {
-  @apply bg-transparent;
+  @apply px-0 border-none;
 }
 .markdown ul {
   @apply pl-8 list-disc;
diff --git a/themes/hugo-w2ng/layouts/partials/footer.html b/themes/hugo-w2ng/layouts/partials/footer.html
index 1545f08..75239cd 100644
--- a/themes/hugo-w2ng/layouts/partials/footer.html
+++ b/themes/hugo-w2ng/layouts/partials/footer.html
@@ -6,7 +6,7 @@
     </div>
 </footer>
 
-{{- if (and .IsPage .Params.math) -}}
+{{- if or ( eq .Params.math true ) ( .HasShortcode "math" ) -}}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
diff --git a/themes/hugo-w2ng/layouts/shortcodes/center.html b/themes/hugo-w2ng/layouts/shortcodes/center.html
new file mode 100644
index 0000000..0b5f2fd
--- /dev/null
+++ b/themes/hugo-w2ng/layouts/shortcodes/center.html
@@ -0,0 +1,3 @@
+<div class='text-center my-6'>
+    {{ .Inner | $.Page.RenderString }}
+</div>
\ No newline at end of file
diff --git a/themes/hugo-w2ng/layouts/shortcodes/expand.html b/themes/hugo-w2ng/layouts/shortcodes/expand.html
new file mode 100644
index 0000000..7da927f
--- /dev/null
+++ b/themes/hugo-w2ng/layouts/shortcodes/expand.html
@@ -0,0 +1,12 @@
+<div class="book-expand my-4 overflow-hidden border border-black">
+    <label>
+      <div class="book-expand-head flex justify-between  py-1 px-2 border-black border-b border-dotted">
+        <span>{{ default "Expand" (.Get 0) }}</span>
+        <span>{{ default "↕" (.Get 1) }}</span>
+      </div>
+      <input type="checkbox" class="hidden" />
+      <div class="book-expand-content py-1 px-2">
+        {{ .Inner | markdownify }}
+      </div>
+    </label>
+</div>
\ No newline at end of file
diff --git a/themes/hugo-w2ng/layouts/shortcodes/math.html b/themes/hugo-w2ng/layouts/shortcodes/math.html
new file mode 100644
index 0000000..2ad1020
--- /dev/null
+++ b/themes/hugo-w2ng/layouts/shortcodes/math.html
@@ -0,0 +1,5 @@
+{{ if ( ( eq ( .Get 0 ) "inline")) }}
+<span class="math inline">\({{- .Inner -}}\)</span>
+{{ else }}
+<span class="math display">\[{{- .Inner -}}\]</span>
+{{ end }}
\ No newline at end of file