diff --git a/public/css/markdown.css b/public/css/markdown.css
index 36e4578..eaa9ab5 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -190,10 +190,22 @@
 }
 
 /* Make details boxes look like on GitHub */
+.markdown-body summary {
+    display: list-item;
+}
+
+.markdown-body summary:focus {
+    outline: none;
+}
+
 .markdown-body details summary {
     cursor: pointer;
 }
 
-.markdown-body summary {
-    display: list-item;
+.markdown-body details:not([open]) > *:not(summary) {
+    display: none;
+}
+
+.markdown-body figure {
+    margin: 1em 40px;
 }
diff --git a/public/js/render.js b/public/js/render.js
index 860f827..23b8934 100644
--- a/public/js/render.js
+++ b/public/js/render.js
@@ -19,12 +19,12 @@ whiteList['style'] = []
 whiteList['kbd'] = []
 // allow ifram tag with some safe attributes
 whiteList['iframe'] = ['allowfullscreen', 'name', 'referrerpolicy', 'sandbox', 'src', 'width', 'height']
-// allow details tag
-whiteList['details'] = []
-// allow summary tag for details
+// allow summary tag
 whiteList['summary'] = []
 // allow ruby tag
 whiteList['ruby'] = []
+// allow rp tag for ruby
+whiteList['rp'] = []
 // allow rt tag for ruby
 whiteList['rt'] = []
 // allow figure tag