From c40a552305edb12393b94e6df8bdf3e1b0aebf44 Mon Sep 17 00:00:00 2001 From: Abdullah Alabbad Date: Thu, 22 Jul 2021 21:49:43 +1000 Subject: [PATCH] support code syntax highlighting in night mode --- Contents/Resources/document.html | 10 ++- Contents/Resources/github-dark-dimmed.min.css | 62 ++++++++++++++++ .../{highlight/styles => }/github-gist.css | 0 .../Resources/github-markdown-night-mode.css | 70 +++++++++++++++++++ Contents/Resources/github.css | 5 ++ README.md | 2 +- 6 files changed, 142 insertions(+), 7 deletions(-) create mode 100644 Contents/Resources/github-dark-dimmed.min.css rename Contents/Resources/{highlight/styles => }/github-gist.css (100%) create mode 100644 Contents/Resources/github-markdown-night-mode.css diff --git a/Contents/Resources/document.html b/Contents/Resources/document.html index a65fbae..af5016d 100644 --- a/Contents/Resources/document.html +++ b/Contents/Resources/document.html @@ -2,15 +2,13 @@ - - - - - - + + + +   diff --git a/Contents/Resources/github-dark-dimmed.min.css b/Contents/Resources/github-dark-dimmed.min.css new file mode 100644 index 0000000..82993b1 --- /dev/null +++ b/Contents/Resources/github-dark-dimmed.min.css @@ -0,0 +1,62 @@ +.night-mode .hljs{ + display:block; + overflow-x:auto; + padding:1em; + padding:3px 5px; + color:#adbac7; + background:#22272e; +} + + +.night-mode .hljs-doctag, +.night-mode .hljs-keyword, +.night-mode .hljs-meta .hljs-keyword, +.night-mode .hljs-template-tag, +.night-mode .hljs-template-variable, +.night-mode .hljs-type, +.night-mode .hljs-variable.language_{color:#f47067} + +.night-mode .hljs-title, +.night-mode .hljs-title.class_, +.night-mode .hljs-title.class_.inherited__, +.night-mode .hljs-title.function_{color:#dcbdfb} + +.night-mode .hljs-attr, +.night-mode .hljs-attribute, +.night-mode .hljs-literal, +.night-mode .hljs-meta, +.night-mode .hljs-number, +.night-mode .hljs-operator, +.night-mode .hljs-selector-attr, +.night-mode .hljs-selector-class, +.night-mode .hljs-selector-id, +.night-mode .hljs-variable{color:#6cb6ff} + +.night-mode .hljs-meta .hljs-string, +.night-mode .hljs-regexp, +.night-mode .hljs-string{color:#96d0ff} + +.night-mode .hljs-built_in, +.night-mode .hljs-symbol{color:#f69d50} +.night-mode .hljs-code, +.night-mode .hljs-comment, +.night-mode .hljs-formula{color:#768390} + +.night-mode .hljs-name, +.night-mode .hljs-quote, +.night-mode .hljs-selector-pseudo, +.night-mode .hljs-selector-tag{color:#8ddb8c} + +.night-mode .hljs-subst{color:#adbac7} + +.night-mode .hljs-section{color:#316dca;font-weight:700} + +.night-mode .hljs-bullet{color:#eac55f} + +.night-mode .hljs-emphasis{color:#adbac7;font-style:italic} + +.night-mode .hljs-strong{color:#adbac7;font-weight:700} + +.night-mode .hljs-addition{color:#b4f1b4;background-color:#1b4721} + +.night-mode .hljs-deletion{color:#ffd8d3;background-color:#78191b} \ No newline at end of file diff --git a/Contents/Resources/highlight/styles/github-gist.css b/Contents/Resources/github-gist.css similarity index 100% rename from Contents/Resources/highlight/styles/github-gist.css rename to Contents/Resources/github-gist.css diff --git a/Contents/Resources/github-markdown-night-mode.css b/Contents/Resources/github-markdown-night-mode.css new file mode 100644 index 0000000..ef2ecf5 --- /dev/null +++ b/Contents/Resources/github-markdown-night-mode.css @@ -0,0 +1,70 @@ +/*! + Theme: GitHub Dark Dimmed + Description: Dark dimmed theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Edited by: @Al3bad + + Colors taken from GitHub's CSS +*/ + +.night-mode, .night-mode .markdown-body { + background-color: #101010; + color: #dedede; +} + +.night-mode .markdown-body a { + color: #0C63C7; +} + +.night-mode .markdown-body hr { + background-color: #333; +} + +.night-mode .markdown-body blockquote { + color: #999; + border-left-color: #333; +} + +.night-mode .markdown-body kbd { + color: #333d56; + background-color: #fafbfc; + border-color: #d1d5da; + border-bottom-color: #c6cbd1; + box-shadow-color: #c6cbd1; +} + +.night-mode .markdown-body h1 { + border-bottom-color: #333; +} + +.night-mode .markdown-body h2 { + border-bottom-color: #333; +} + +.night-mode .markdown-body h6 { + color: #999; +} + +.night-mode .markdown-body table tr { + background-color: #101010; +} + +.night-mode .markdown-body table, .night-mode .markdown-body th, .night-mode .markdown-body td { + border-color: #353535; +} + +.night-mode .markdown-body table tr:nth-child(2n) { + background-color: #1e1e1e; +} + +.night-mode .markdown-body img { + background-color: #fff; +} + +.night-mode .markdown-body code, +.night-mode .markdown-body pre { + background-color: #242422; +} diff --git a/Contents/Resources/github.css b/Contents/Resources/github.css index 4182c43..0f6c4f8 100644 --- a/Contents/Resources/github.css +++ b/Contents/Resources/github.css @@ -1,3 +1,8 @@ +@import 'github-markdown.css' screen and (min-width: 520px), print; +@import 'github-gist.css' screen and (min-width: 520px), print; +@import 'github-markdown-night-mode.css' screen; +@import 'github-dark-dimmed.min.css' screen; + html { background-color: white; } diff --git a/README.md b/README.md index 28f9801..ec1aab3 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Same thing for updates – iA Writer will prompt you if you want to replace the ## Features -### Code Syntax Highlighting +### Code Syntax Highlighting in both light & night modes

Screenshot