소스 검색

feat: Dark/Light Theme support for code blocks

NGPixel 8 년 전
부모
커밋
06b49e037b
2개의 변경된 파일53개의 추가작업 그리고 1개의 파일을 삭제
  1. 52 0
      client/scss/components/markdown-content.scss
  2. 1 1
      server/views/pages/view.pug

+ 52 - 0
client/scss/components/markdown-content.scss

@@ -281,6 +281,58 @@
 
 	}
 
+  &.is-code-dark {
+    pre, pre.hljs {
+      background-color: mc('blue-grey', '900');
+		  border-left-color: mc('blue-grey', '500');
+
+      > code {
+        color: mc('blue-grey', '100');
+      }
+    }
+  }
+
+  &.is-code-light {
+    @import 'node_modules/highlight.js/styles/atom-one-light';
+    pre, pre.hljs {
+      background-color: lighten(mc('blue-grey', '50'), 3%);
+		  border-left: 7px solid mc('blue-grey', '100');
+      border-top: 1px solid mc('blue-grey', '100');
+      border-bottom: 1px solid mc('blue-grey', '100');
+
+      > code {
+        color: mc('blue-grey', '800');
+      }
+    }
+  }
+
+  &.is-code-dark, &.is-code-light {
+    pre, pre.hljs {
+      padding: 20px 20px 20px 13px;
+      font-family: $core-font-monospace;
+      white-space: pre;
+      overflow-x: auto;
+
+      > code {
+        border-radius: 5px;
+        font-weight: 400;
+        background-color: transparent;
+        padding: 0;
+        font-family: $core-font-monospace;
+        font-size: 13px;
+      }
+
+      & + p {
+        padding-top: 1em;
+      }
+
+      & + h1, & + h2, & + h3 {
+        margin-top: 1px;
+      }
+
+    }
+  }
+
 	.align-right {
 		float:right;
     margin: 0 0 10px 10px;

+ 1 - 1
server/views/pages/view.pug

@@ -77,7 +77,7 @@ block content
             h1.title#title= pageData.meta.title
             if pageData.meta.subtitle
               h2.subtitle= pageData.meta.subtitle
-          .content.mkcontent(v-pre)
+          .content.mkcontent(v-pre, class=[appconfig.theme.code.dark ? 'is-code-dark' : 'is-code-light'])
             != pageData.html
 
   modal-create-page(basepath=pageData.meta.path)