diff --git a/src/components/PreferencesModal/GeneralTab.tsx b/src/components/PreferencesModal/GeneralTab.tsx
index ccf1f13cc3..9481f7dbbd 100644
--- a/src/components/PreferencesModal/GeneralTab.tsx
+++ b/src/components/PreferencesModal/GeneralTab.tsx
@@ -71,7 +71,7 @@ const GeneralTab = () => {
             onChange={selectLanguage}
           >
             <option value='en-US'>English (US)</option>
-            <option value='ja'>Japanese</option>
+            <option value='ja'>日本語</option>
           </select>
         </SectionControl>
       </Section>
diff --git a/src/components/PreferencesModal/MarkdownTab.tsx b/src/components/PreferencesModal/MarkdownTab.tsx
index d0bede4752..a2d4a04ee3 100644
--- a/src/components/PreferencesModal/MarkdownTab.tsx
+++ b/src/components/PreferencesModal/MarkdownTab.tsx
@@ -8,6 +8,7 @@ import { SelectChangeEventHandler } from '../../lib/events'
 import { themes } from '../../lib/CodeMirror'
 import { capitalize } from '../../lib/string'
 import { useTranslation } from 'react-i18next'
+import { usePreviewStyle, defaultPreviewStyle } from '../../lib/preview'
 
 const defaultPreviewContent = `# hello-world.js
 
@@ -26,6 +27,24 @@ const PreviewContainer = styled.div`
 `
 
 const MarkdownTab = () => {
+  const { previewStyle, setPreviewStyle } = usePreviewStyle()
+  const [newPreviewStyle, setNewPreviewStyle] = useState(previewStyle)
+  const updatePreviewStyle = useCallback(
+    (newValue: string) => {
+      setNewPreviewStyle(newValue)
+    },
+    [setNewPreviewStyle]
+  )
+  const savePreviewStyle = useCallback(() => {
+    if (previewStyle !== newPreviewStyle) {
+      setPreviewStyle(newPreviewStyle)
+    }
+  }, [setPreviewStyle, newPreviewStyle, previewStyle])
+
+  const resetNewPreviewStyle = useCallback(() => {
+    setNewPreviewStyle(defaultPreviewStyle)
+  }, [setNewPreviewStyle])
+
   const { preferences, setPreferences } = usePreferences()
 
   const selectCodeFenceTheme: SelectChangeEventHandler = useCallback(
@@ -49,6 +68,18 @@ const MarkdownTab = () => {
 
   return (
     <div>
+      <Section>
+        <SectionHeader>{t('preferences.previewStyle')}</SectionHeader>
+        <SectionControl>
+          <button onClick={savePreviewStyle}>Save</button>
+          <button onClick={resetNewPreviewStyle}>Use default style</button>
+          <CustomizedCodeEditor
+            value={newPreviewStyle}
+            onChange={updatePreviewStyle}
+            mode='css'
+          />
+        </SectionControl>
+      </Section>
       <Section>
         <SectionHeader>{t('preferences.markdownCodeBlockTheme')}</SectionHeader>
         <SectionControl>
diff --git a/src/components/atoms/CodeEditor.tsx b/src/components/atoms/CodeEditor.tsx
index 7241de1688..c9c642d9c5 100644
--- a/src/components/atoms/CodeEditor.tsx
+++ b/src/components/atoms/CodeEditor.tsx
@@ -15,8 +15,7 @@ const StyledContainer = styled.div`
 
 const defaultCodeMirrorOptions: CodeMirror.EditorConfiguration = {
   lineWrapping: true,
-  lineNumbers: true,
-  mode: 'markdown'
+  lineNumbers: true
 }
 
 interface CodeEditorProps {
@@ -33,6 +32,7 @@ interface CodeEditorProps {
   indentType?: EditorIndentTypeOptions
   indentSize?: EditorIndentSizeOptions
   keyMap?: EditorKeyMapOptions
+  mode?: string
 }
 
 class CodeEditor extends React.Component<CodeEditorProps> {
@@ -51,7 +51,8 @@ class CodeEditor extends React.Component<CodeEditorProps> {
       indentWithTabs: this.props.indentType === 'tab',
       indentUnit: indentSize,
       tabSize: indentSize,
-      keyMap
+      keyMap,
+      mode: this.props.mode || 'markdown'
     })
     this.codeMirror.on('change', this.handleCodeMirrorChange)
     window.addEventListener('codemirror-mode-load', this.reloadMode)
diff --git a/src/components/atoms/CustomizedCodeEditor.tsx b/src/components/atoms/CustomizedCodeEditor.tsx
index 3aad7532db..0a498b6cfe 100644
--- a/src/components/atoms/CustomizedCodeEditor.tsx
+++ b/src/components/atoms/CustomizedCodeEditor.tsx
@@ -10,13 +10,15 @@ interface CustomizedCodeEditor {
   ) => void
   codeMirrorRef?: (codeMirror: CodeMirror.EditorFromTextArea) => void
   className?: string
+  mode?: string
 }
 
 const CustomizedCodeEditor = ({
   onChange,
   value,
   codeMirrorRef,
-  className
+  className,
+  mode
 }: CustomizedCodeEditor) => {
   const { preferences } = usePreferences()
   return (
@@ -31,6 +33,7 @@ const CustomizedCodeEditor = ({
       indentType={preferences['editor.indentType']}
       indentSize={preferences['editor.indentSize']}
       keyMap={preferences['editor.keyMap']}
+      mode={mode}
     />
   )
 }
diff --git a/src/components/atoms/CustomizedMarkdownPreviewer.tsx b/src/components/atoms/CustomizedMarkdownPreviewer.tsx
index 88c8b8529c..081c781a7b 100644
--- a/src/components/atoms/CustomizedMarkdownPreviewer.tsx
+++ b/src/components/atoms/CustomizedMarkdownPreviewer.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { usePreferences } from '../../lib/preferences'
 import MarkdownPreviewer from './MarkdownPreviewer'
+import { usePreviewStyle } from '../../lib/preview'
 
 interface CustomizedMarkdownPreviewer {
   content: string
@@ -10,11 +11,13 @@ const CustomizedMarkdownPreviewer = ({
   content
 }: CustomizedMarkdownPreviewer) => {
   const { preferences } = usePreferences()
+  const { previewStyle } = usePreviewStyle()
 
   return (
     <MarkdownPreviewer
       content={content}
       theme={preferences['markdown.codeBlockTheme']}
+      style={previewStyle}
     />
   )
 }
diff --git a/src/components/atoms/MarkdownPreviewer.tsx b/src/components/atoms/MarkdownPreviewer.tsx
index 682ff76254..9c63aaaf8a 100644
--- a/src/components/atoms/MarkdownPreviewer.tsx
+++ b/src/components/atoms/MarkdownPreviewer.tsx
@@ -13,7 +13,6 @@ import CodeMirror from '../../lib/CodeMirror'
 import h from 'hastscript'
 import useForceUpdate from 'use-force-update'
 import styled from '../../lib/styled'
-import { githubPreviewStyle } from '../../lib/preview'
 
 const schema = mergeDeepRight(gh, { attributes: { '*': ['className'] } })
 
@@ -150,19 +149,17 @@ function createMarkdownProcessor(options: MarkdownProcessorOptions = {}) {
     .use(rehypeReact, { createElement: React.createElement })
 }
 
-const StyledContainer = styled.div`
-  .CodeMirror {
-    height: inherit;
-  }
-  ${githubPreviewStyle}
-`
-
 interface MarkdownPreviewerProps {
   content: string
   theme?: string
+  style?: string
 }
 
-const MarkdownPreviewer = ({ content, theme }: MarkdownPreviewerProps) => {
+const MarkdownPreviewer = ({
+  content,
+  theme,
+  style
+}: MarkdownPreviewerProps) => {
   const forceUpdate = useForceUpdate()
   const [rendering, setRendering] = useState(false)
   const previousContentRef = useRef('')
@@ -209,6 +206,15 @@ const MarkdownPreviewer = ({ content, theme }: MarkdownPreviewerProps) => {
     renderContent(content)
   }, [content, theme, rendering, renderContent, renderedContent])
 
+  const StyledContainer = useMemo(() => {
+    return styled.div`
+      .CodeMirror {
+        height: inherit;
+      }
+      ${style}
+    `
+  }, [style])
+
   return (
     <StyledContainer className='MarkdownPreviewer'>
       {rendering && 'rendering...'}
diff --git a/src/index.tsx b/src/index.tsx
index d639c902c2..f27bba7fd0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,8 +8,10 @@ import { combineProviders } from './lib/utils/context'
 import { DbProvider } from './lib/db'
 import { PreferencesProvider } from './lib/preferences'
 import { GeneralStatusProvider } from './lib/generalStatus'
+import { PreviewStyleProvider } from './lib/preview'
 
 const CombinedProvider = combineProviders(
+  PreviewStyleProvider,
   GeneralStatusProvider,
   PreferencesProvider,
   DialogProvider,
diff --git a/src/lib/CodeMirror.ts b/src/lib/CodeMirror.ts
index 7734472299..ab97dba2a6 100644
--- a/src/lib/CodeMirror.ts
+++ b/src/lib/CodeMirror.ts
@@ -1,7 +1,9 @@
 import CodeMirror from 'codemirror'
 import 'codemirror/addon/runmode/runmode'
 import 'codemirror/addon/mode/overlay'
+import 'codemirror/addon/comment/comment'
 import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/css/css'
 import debounce from 'lodash/debounce'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/keymap/sublime'
diff --git a/src/lib/i18n/enUS.ts b/src/lib/i18n/enUS.ts
index 10f1d34cce..1e96bd74c4 100644
--- a/src/lib/i18n/enUS.ts
+++ b/src/lib/i18n/enUS.ts
@@ -32,6 +32,7 @@ export default {
     'preferences.editorPreview': 'Editor Preview',
 
     // Preferences MarkdownTab
+    'preferences.previewStyle': 'Preview Style',
     'preferences.markdownCodeBlockTheme': 'Code Block Theme'
   }
 }
diff --git a/src/lib/i18n/ja.ts b/src/lib/i18n/ja.ts
index 57b6f41689..0c140743fe 100644
--- a/src/lib/i18n/ja.ts
+++ b/src/lib/i18n/ja.ts
@@ -32,6 +32,7 @@ export default {
     'preferences.editorPreview': 'エディタープレヴュー',
 
     // Preferences MarkdownTab
+    'preferences.previewStyle': 'プレビュースタイル',
     'preferences.markdownCodeBlockTheme': 'コードブロックテーマ'
   }
 }
diff --git a/src/lib/localStorageKeys.ts b/src/lib/localStorageKeys.ts
index 4957fe0a76..cf5de2a921 100644
--- a/src/lib/localStorageKeys.ts
+++ b/src/lib/localStorageKeys.ts
@@ -1,3 +1,4 @@
 export const preferencesKey = 'note.boostio.co:preferences'
 export const storageDataListKey = 'note.boostio.co:storageDataList'
 export const generalStatusKey = 'note.boostio.co:generalStatusKey'
+export const previewStyleKey = 'note.boostio.co:previewStyleKey'
diff --git a/src/lib/preview.ts b/src/lib/preview.ts
index cb6d21fe29..69542d7a17 100644
--- a/src/lib/preview.ts
+++ b/src/lib/preview.ts
@@ -1,512 +1,547 @@
-export const githubPreviewStyle = `
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  color: #24292e;
-  line-height: 1.5;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+import { useState, useEffect } from 'react'
+import { localLiteStorage } from 'ltstrg'
+import { previewStyleKey } from './localStorageKeys'
+import { createStoreContext } from './utils/context'
+
+function loadPreviewStyle() {
+  const previewStyle = localLiteStorage.getItem(previewStyleKey)
+  if (previewStyle == null) return defaultPreviewStyle
+  return previewStyle
+}
+
+function savePreviewStyle(style: string) {
+  return localLiteStorage.setItem(previewStyleKey, style)
+}
+
+const initialPreviewStyle = loadPreviewStyle()
+
+function usePreviewStyleStore() {
+  const [previewStyle, setPreviewStyle] = useState(initialPreviewStyle)
+
+  useEffect(() => {
+    savePreviewStyle(previewStyle)
+  }, [previewStyle])
+
+  return {
+    previewStyle,
+    setPreviewStyle
+  }
+}
+
+export const {
+  StoreProvider: PreviewStyleProvider,
+  useStore: usePreviewStyle
+} = createStoreContext(usePreviewStyleStore, 'previewStyle')
+
+export const defaultPreviewStyle = `
+-ms-text-size-adjust: 100%;
+-webkit-text-size-adjust: 100%;
+color: #24292e;
+line-height: 1.5;
+font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+  sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+font-size: 16px;
+line-height: 1.5;
+word-wrap: break-word;
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+a {
+  background-color: transparent;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+strong {
+  font-weight: inherit;
+  font-weight: bolder;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+img {
+  border-style: none;
+}
+
+code,
+kbd,
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+input {
+  font: inherit;
+  margin: 0;
+}
+
+input {
+  overflow: visible;
+}
+
+[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+strong {
+  font-weight: 600;
+}
+
+hr {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+}
+
+hr:before {
+  content: '';
+  display: table;
+}
+
+hr:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+details summary {
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h1,
+h2 {
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h3,
+h4 {
+  font-weight: 600;
+}
+
+h4 {
   font-size: 16px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  & details {
-    display: block;
-  }
-
-  & summary {
-    display: list-item;
-  }
-
-  & a {
-    background-color: transparent;
-  }
-
-  & a:active,
-  & a:hover {
-    outline-width: 0;
-  }
-
-  & strong {
-    font-weight: inherit;
-    font-weight: bolder;
-  }
-
-  & h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  & img {
-    border-style: none;
-  }
-
-  & code,
-  & kbd,
-  & pre {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-
-  & hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
-  }
-
-  & input {
-    font: inherit;
-    margin: 0;
-  }
-
-  & input {
-    overflow: visible;
-  }
-
-  & [type='checkbox'] {
-    box-sizing: border-box;
-    padding: 0;
-  }
-
-  & * {
-    box-sizing: border-box;
-  }
-
-  & input {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  & a {
-    color: #0366d6;
-    text-decoration: none;
-  }
-
-  & a:hover {
-    text-decoration: underline;
-  }
-
-  & strong {
-    font-weight: 600;
-  }
-
-  & hr {
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid #dfe2e5;
-    height: 0;
-    margin: 15px 0;
-    overflow: hidden;
-  }
-
-  & hr:before {
-    content: '';
-    display: table;
-  }
-
-  & hr:after {
-    clear: both;
-    content: '';
-    display: table;
-  }
-
-  & table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  & td,
-  & th {
-    padding: 0;
-  }
-
-  & details summary {
-    cursor: pointer;
-  }
-
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  & h1 {
-    font-size: 32px;
-  }
-
-  & h1,
-  & h2 {
-    font-weight: 600;
-  }
-
-  & h2 {
-    font-size: 24px;
-  }
-
-  & h3 {
-    font-size: 20px;
-  }
-
-  & h3,
-  & h4 {
-    font-weight: 600;
-  }
-
-  & h4 {
-    font-size: 16px;
-  }
-
-  & h5 {
-    font-size: 14px;
-  }
-
-  & h5,
-  & h6 {
-    font-weight: 600;
-  }
-
-  & h6 {
-    font-size: 12px;
-  }
-
-  & p {
-    margin-bottom: 10px;
-    margin-top: 0;
-  }
-
-  & blockquote {
-    margin: 0;
-  }
-
-  & ol,
-  & ul {
-    margin-bottom: 0;
-    margin-top: 0;
-    padding-left: 0;
-  }
-
-  & ol ol,
-  & ul ol {
-    list-style-type: lower-roman;
-  }
-
-  & ol ol ol,
-  & ol ul ol,
-  & ul ol ol,
-  & ul ul ol {
-    list-style-type: lower-alpha;
-  }
-
-  & dd {
-    margin-left: 0;
-  }
-
-  & code,
-  & pre {
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
-      monospace;
-    font-size: 12px;
-  }
-
-  & pre {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  & input::-webkit-inner-spin-button,
-  & input::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
-
-  &:before {
-    content: '';
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-    content: '';
-    display: table;
-  }
-
-  & > :first-child {
-    margin-top: 0 !important;
-  }
-
-  & > :last-child {
-    margin-bottom: 0 !important;
-  }
-
-  & a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  & blockquote,
-  & dl,
-  & ol,
-  & p,
-  & pre,
-  & table,
-  & ul {
-    margin-bottom: 16px;
-    margin-top: 0;
-  }
-
-  & hr {
-    background-color: #e1e4e8;
-    border: 0;
-    height: 0.25em;
-    margin: 24px 0;
-    padding: 0;
-  }
-
-  & blockquote {
-    border-left: 0.25em solid #dfe2e5;
-    color: #6a737d;
-    padding: 0 1em;
-  }
-
-  & blockquote > :first-child {
-    margin-top: 0;
-  }
-
-  & blockquote > :last-child {
-    margin-bottom: 0;
-  }
-
-  & kbd {
-    background-color: #fafbfc;
-    border: 1px solid #c6cbd1;
-    border-bottom-color: #959da5;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #959da5;
-    color: #444d56;
-    display: inline-block;
-    font-size: 11px;
-    line-height: 10px;
-    padding: 3px 5px;
-    vertical-align: middle;
-  }
-
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    font-weight: 600;
-    line-height: 1.25;
-    margin-bottom: 16px;
-    margin-top: 24px;
-  }
-
-  & h1 {
-    font-size: 2em;
-  }
-
-  & h1,
-  & h2 {
-    border-bottom: 1px solid #eaecef;
-    padding-bottom: 0.3em;
-  }
-
-  & h2 {
-    font-size: 1.5em;
-  }
-
-  & h3 {
-    font-size: 1.25em;
-  }
-
-  & h4 {
-    font-size: 1em;
-  }
-
-  & h5 {
-    font-size: 0.875em;
-  }
-
-  & h6 {
-    color: #6a737d;
-    font-size: 0.85em;
-  }
-
-  & ol,
-  & ul {
-    padding-left: 2em;
-  }
-
-  & ol ol,
-  & ol ul,
-  & ul ol,
-  & ul ul {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  & li {
-    word-wrap: break-all;
-  }
-
-  & li > p {
-    margin-top: 16px;
-  }
-
-  & li + li {
-    margin-top: 0.25em;
-  }
-
-  & dl {
-    padding: 0;
-  }
-
-  & dl dt {
-    font-size: 1em;
-    font-style: italic;
-    font-weight: 600;
-    margin-top: 16px;
-    padding: 0;
-  }
-
-  & dl dd {
-    margin-bottom: 16px;
-    padding: 0 16px;
-  }
-
-  & table {
-    display: block;
-    overflow: auto;
-    width: 100%;
-  }
-
-  & table th {
-    font-weight: 600;
-  }
-
-  & table td,
-  & table th {
-    border: 1px solid #dfe2e5;
-    padding: 6px 13px;
-  }
-
-  & table tr {
-    background-color: #fff;
-    border-top: 1px solid #c6cbd1;
-  }
-
-  & table tr:nth-child(2n) {
-    background-color: #f6f8fa;
-  }
-
-  & img {
-    background-color: #fff;
-    box-sizing: content-box;
-    max-width: 100%;
-  }
-
-  & img[align='right'] {
-    padding-left: 20px;
-  }
-
-  & img[align='left'] {
-    padding-right: 20px;
-  }
-
-  & code {
-    background-color: rgba(27, 31, 35, 0.05);
-    border-radius: 3px;
-    font-size: 85%;
-    margin: 0;
-    padding: 0.2em 0.4em;
-  }
-
-  & pre {
-    word-wrap: normal;
-  }
-
-  & pre > code {
-    background: transparent;
-    border: 0;
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    word-break: normal;
-  }
-
-  & .highlight {
-    margin-bottom: 16px;
-  }
-
-  & .highlight pre {
-    margin-bottom: 0;
-    word-break: normal;
-  }
-
-  & .highlight pre,
-  & pre {
-    background-color: #f6f8fa;
-    border-radius: 3px;
-    font-size: 85%;
-    line-height: 1.45;
-    overflow: auto;
-    padding: 16px;
-  }
-
-  & pre code {
-    background-color: transparent;
-    border: 0;
-    display: inline;
-    line-height: inherit;
-    margin: 0;
-    max-width: auto;
-    overflow: visible;
-    padding: 0;
-    word-wrap: normal;
-  }
-
-  & kbd {
-    background-color: #fafbfc;
-    border: 1px solid #d1d5da;
-    border-bottom-color: #c6cbd1;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #c6cbd1;
-    color: #444d56;
-    display: inline-block;
-    font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
-      monospace;
-    line-height: 10px;
-    padding: 3px 5px;
-    vertical-align: middle;
-  }
-
-  & :checked + .radio-label {
-    border-color: #0366d6;
-    position: relative;
-    z-index: 1;
-  }
-
-  & .task-list-item {
-    list-style-type: none;
-  }
-
-  & .task-list-item + .task-list-item {
-    margin-top: 3px;
-  }
-
-  & .task-list-item input {
-    margin: 0 0.2em 0.25em -1.6em;
-    vertical-align: middle;
-  }
-
-  & hr {
-    border-bottom-color: #eee;
-  }
+}
+
+h5 {
+  font-size: 14px;
+}
+
+h5,
+h6 {
+  font-weight: 600;
+}
+
+h6 {
+  font-size: 12px;
+}
+
+p {
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+blockquote {
+  margin: 0;
+}
+
+ol,
+ul {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+
+ol ol ol,
+ol ul ol,
+ul ol ol,
+ul ul ol {
+  list-style-type: lower-alpha;
+}
+
+dd {
+  margin-left: 0;
+}
+
+code,
+pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 12px;
+}
+
+pre {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+&:before {
+  content: '';
+  display: table;
+}
+
+&:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+> :first-child {
+  margin-top: 0 !important;
+}
+
+> :last-child {
+  margin-bottom: 0 !important;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+blockquote,
+dl,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+hr {
+  background-color: #e1e4e8;
+  border: 0;
+  height: 0.25em;
+  margin: 24px 0;
+  padding: 0;
+}
+
+blockquote {
+  border-left: 0.25em solid #dfe2e5;
+  color: #6a737d;
+  padding: 0 1em;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+kbd {
+  background-color: #fafbfc;
+  border: 1px solid #c6cbd1;
+  border-bottom-color: #959da5;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #959da5;
+  color: #444d56;
+  display: inline-block;
+  font-size: 11px;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h1,
+h2 {
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.25em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.875em;
+}
+
+h6 {
+  color: #6a737d;
+  font-size: 0.85em;
+}
+
+ol,
+ul {
+  padding-left: 2em;
+}
+
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+li {
+  word-wrap: break-all;
+}
+
+li > p {
+  margin-top: 16px;
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+dl {
+  padding: 0;
+}
+
+dl dt {
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+  margin-top: 16px;
+  padding: 0;
+}
+
+dl dd {
+  margin-bottom: 16px;
+  padding: 0 16px;
+}
+
+table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+
+table th {
+  font-weight: 600;
+}
+
+table td,
+table th {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+
+table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+img {
+  background-color: #fff;
+  box-sizing: content-box;
+  max-width: 100%;
+}
+
+img[align='right'] {
+  padding-left: 20px;
+}
+
+img[align='left'] {
+  padding-right: 20px;
+}
+
+code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+}
+
+pre {
+  word-wrap: normal;
+}
+
+pre > code {
+  background: transparent;
+  border: 0;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+  word-break: normal;
+}
+
+.highlight {
+  margin-bottom: 16px;
+}
+
+.highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.highlight pre,
+pre {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  font-size: 85%;
+  line-height: 1.45;
+  overflow: auto;
+  padding: 16px;
+}
+
+pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  max-width: auto;
+  overflow: visible;
+  padding: 0;
+  word-wrap: normal;
+}
+
+kbd {
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+  color: #444d56;
+  display: inline-block;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+:checked + .radio-label {
+  border-color: #0366d6;
+  position: relative;
+  z-index: 1;
+}
+
+.task-list-item {
+  list-style-type: none;
+}
+
+.task-list-item + .task-list-item {
+  margin-top: 3px;
+}
+
+.task-list-item input {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
+hr {
+  border-bottom-color: #eee;
+}
 `