Update themes

background/inject.js

@@ -21,7 +21,6 @@ md.inject = ({storage: {state}}) => (id) => {
     target: {tabId: id},
     files: [
       '/content/index.css',
-      '/vendor/prism.min.css',
     ]
   })
 
@@ -31,7 +30,7 @@ md.inject = ({storage: {state}}) => (id) => {
       '/vendor/mithril.min.js',
       '/vendor/prism.min.js',
       state.content.emoji && '/content/emoji.js',
-      state.content.mermaid && ['/vendor/mermaid.min.js', '/vendor/mermaid.init.js'],
+      state.content.mermaid && ['/vendor/mermaid.min.js', '/content/mermaid.js'],
       '/content/index.js',
     ].filter(Boolean).flat(),
     injectImmediately: true

build/README.md

@@ -13,7 +13,8 @@ sh build/package.sh
 
 ## Build Dependencies
 
-- Node.js >= 14
+- node >= 14
+- npm
 - git
 - curl
 - zip
@@ -27,12 +28,14 @@ sh build/package.sh
 | @material/switch    | ^0.36.1
 | @material/tabs      | ^0.37.1
 | @material/textfield | ^0.37.1
+| cleanrmd            |  0.1.0
 | emojione            |  2.2.7
+| github-markdown-css |  5.1.0
 | marked              |  4.1.1
 | mathjax             |  3.2.2
 | mermaid             |  9.1.6
 | mithril             |  1.1.6
-| prismjs             |  1.22.0
+| prismjs             | ^1.29.0
 | remark              | ^14.0.2
 | remark-breaks       | ^3.0.2
 | remark-footnotes    | ^4.0.1

build/themes/build.sh

@@ -3,31 +3,45 @@
 # set current working directory to directory of the shell script
 cd "$(dirname "$0")"
 
-git clone --depth 1 https://github.com/simov/markdown-themes.git
-node fix-github.js
+mkdir -p ../../themes
 
-npm install
+# https://github.com/sindresorhus/github-markdown-css
+curl https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css --output ../../themes/github.css
+curl https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.min.css --output ../../themes/github-dark.css
 
-mkdir -p ../../themes
-npx csso --input markdown-themes/foghorn.css --output ../../themes/foghorn.css
-npx csso --input markdown-themes/ghostwriter.css --output ../../themes/ghostwriter.css
-npx csso --input markdown-themes/github.css --output ../../themes/github.css
-npx csso --input markdown-themes/github-dark.css --output ../../themes/github-dark.css
-npx csso --input markdown-themes/godspeed.css --output ../../themes/godspeed.css
-npx csso --input markdown-themes/markdown5.css --output ../../themes/markdown5.css
-npx csso --input markdown-themes/markdown6.css --output ../../themes/markdown6.css
-npx csso --input markdown-themes/markdown7.css --output ../../themes/markdown7.css
-npx csso --input markdown-themes/markdown8.css --output ../../themes/markdown8.css
-npx csso --input markdown-themes/markdown9.css --output ../../themes/markdown9.css
-npx csso --input markdown-themes/markdown-alt.css --output ../../themes/markdown-alt.css
-npx csso --input markdown-themes/markdown.css --output ../../themes/markdown.css
-npx csso --input markdown-themes/markedapp-byword.css --output ../../themes/markedapp-byword.css
-npx csso --input markdown-themes/new-modern.css --output ../../themes/new-modern.css
-npx csso --input markdown-themes/radar.css --output ../../themes/radar.css
-npx csso --input markdown-themes/screen.css --output ../../themes/screen.css
-npx csso --input markdown-themes/solarized-dark.css --output ../../themes/solarized-dark.css
-npx csso --input markdown-themes/solarized-light.css --output ../../themes/solarized-light.css
-npx csso --input markdown-themes/torpedo.css --output ../../themes/torpedo.css
-npx csso --input markdown-themes/vostok.css --output ../../themes/vostok.css
+# https://github.com/gadenbuie/cleanrmd
+git clone --depth 1 --branch v0.1.0 https://github.com/gadenbuie/cleanrmd.git
+
+npm install
+npx csso --input cleanrmd/inst/resources/almond/almond.css --output ../../themes/almond.css
+npx csso --input cleanrmd/inst/resources/awsm.css/awsm.css --output ../../themes/awsm.css
+npx csso --input cleanrmd/inst/resources/axist/axist.css --output ../../themes/axist.css
+npx csso --input cleanrmd/inst/resources/bamboo/bamboo.css --output ../../themes/bamboo.css
+npx csso --input cleanrmd/inst/resources/bullframe/bullframe.css --output ../../themes/bullframe.css
+npx csso --input cleanrmd/inst/resources/holiday/holiday.css --output ../../themes/holiday.css
+npx csso --input cleanrmd/inst/resources/kacit/kacit.css --output ../../themes/kacit.css
+npx csso --input cleanrmd/inst/resources/latex.css/latex.css --output ../../themes/latex.css
+npx csso --input cleanrmd/inst/resources/markdown-splendor/markdown-splendor.css --output ../../themes/markdown-splendor.css
+npx csso --input cleanrmd/inst/resources/markdown-retro/markdown-retro.css --output ../../themes/markdown-retro.css
+npx csso --input cleanrmd/inst/resources/markdown-air/markdown-air.css --output ../../themes/markdown-air.css
+npx csso --input cleanrmd/inst/resources/markdown-modest/markdown-modest.css --output ../../themes/markdown-modest.css
+npx csso --input cleanrmd/inst/resources/marx/marx.css --output ../../themes/marx.css
+npx csso --input cleanrmd/inst/resources/minicss/minicss.css --output ../../themes/minicss.css
+npx csso --input cleanrmd/inst/resources/new.css/new.css --output ../../themes/new.css
+npx csso --input cleanrmd/inst/resources/no-class/no-class.css --output ../../themes/no-class.css
+npx csso --input cleanrmd/inst/resources/picocss/pico.css --output ../../themes/pico.css
+npx csso --input cleanrmd/inst/resources/sakura/sakura.css --output ../../themes/sakura.css
+npx csso --input cleanrmd/inst/resources/sakura-vader/sakura-vader.css --output ../../themes/sakura-vader.css
+npx csso --input cleanrmd/inst/resources/semantic/semantic.css --output ../../themes/semantic.css
+npx csso --input cleanrmd/inst/resources/simplecss/simple.css --output ../../themes/simplecss.css
+npx csso --input cleanrmd/inst/resources/style-sans/style-sans.css --output ../../themes/style-sans.css
+npx csso --input cleanrmd/inst/resources/style-serif/style-serif.css --output ../../themes/style-serif.css
+npx csso --input cleanrmd/inst/resources/stylize/stylize.css --output ../../themes/stylize.css
+npx csso --input cleanrmd/inst/resources/superstylin/superstylin.css --output ../../themes/superstylin.css
+npx csso --input cleanrmd/inst/resources/tacit/tacit.css --output ../../themes/tacit.css
+npx csso --input cleanrmd/inst/resources/vanilla/vanilla.css --output ../../themes/vanilla.css
+npx csso --input cleanrmd/inst/resources/water/water.css --output ../../themes/water.css
+npx csso --input cleanrmd/inst/resources/water-dark/water-dark.css --output ../../themes/water-dark.css
+npx csso --input cleanrmd/inst/resources/writ/writ.css --output ../../themes/writ.css
 
-rm -rf markdown-themes/ node_modules/ package-lock.json
+rm -rf cleanrmd/ node_modules/ package-lock.json

build/themes/fix-github.js

@@ -1,10 +0,0 @@
-
-var fs = require('fs')
-var path = require('path')
-
-var fpath = path.resolve(__dirname, 'markdown-themes/github.css')
-
-var theme = fs.readFileSync(fpath, 'utf8')
-  .replace(/\.markdown-body :root/g, ':root')
-
-fs.writeFileSync(fpath, theme, 'utf8')

build/themes/package.json

@@ -4,7 +4,7 @@
   "description": "Markdown Viewer / Browser Extension",
   "private": true,
   "devDependencies": {
-    "csso-cli": "^2.0.2"
+    "csso-cli": "^4.0.1"
   },
   "engines": {
     "node": ">=14.0.0"

content/index.css

@@ -1,27 +1,33 @@
 
-/*global*/
+/*-----------------------------------------------------------------------------
+  global*/
 html, body {
   padding: 0 !important; margin: 0 !important;
   width: auto !important; max-width: 100% !important;
 }
 
+/*-----------------------------------------------------------------------------
+  raw markdown view*/
+
 pre#_markdown {
   word-wrap: break-word;
   white-space: pre-wrap;
 }
 
-/*github theme*/
+/*-----------------------------------------------------------------------------
+  github theme*/
+
 .markdown-body {
   overflow: auto;
 
-  min-width: 838px;
-  max-width: 838px;
+  min-width: 830px;
+  max-width: 830px;
 
   background-color: #fff;
   border: 1px solid #e1e4e8;
 
   padding: 32px;
-  margin: 20px auto;
+  margin: 20px auto !important;
 }
 .markdown-body #_html>*:first-child {
   margin-top: 0 !important;
@@ -33,27 +39,44 @@ pre#_markdown {
   background-color: transparent;
 }
 
-/*all other themes*/
+/*-----------------------------------------------------------------------------
+  all other themes*/
+
 .markdown-theme {
   box-sizing: border-box;
   max-width: 100% !important;
   padding: 20px !important;
   margin: 0 auto !important;
 }
-@media (max-width: 767px) {
+.markdown-theme pre,
+.markdown-theme pre code {
+  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+@media (max-width: 576px) { /*Extra small - none*/
   .markdown-theme { width: auto !important; }
 }
-@media (min-width: 768px) and (max-width: 992px) {
-  .markdown-theme { width: 713px !important; }
+@media (min-width: 576px) and (max-width: 768px) { /*Small sm*/
+  .markdown-theme { width: 576px !important; }
+}
+@media (min-width: 768px) and (max-width: 992px) { /*Medium md*/
+  .markdown-theme { width: 768px !important; }
+}
+@media (min-width: 992px) and (max-width: 1200px) { /*Large lg*/
+  .markdown-theme { width: 992px !important; }
 }
-@media (min-width: 992px) and (max-width: 1200px) {
-  .markdown-theme { width: 937px !important; }
+@media (min-width: 1200px) and (max-width: 1400px) { /*Extra large xl*/
+  .markdown-theme { width: 1200px !important; }
 }
-@media (min-width: 1200px) {
-  .markdown-theme { width: 1145px !important; }
+@media (min-width: 1400px) { /*Extra extra large xxl*/
+  .markdown-theme { width: 1400px !important; }
 }
 
-/*100% width*/
+/*-----------------------------------------------------------------------------
+  100% width*/
+
 .wide-theme {
   box-sizing: border-box;
   width: 100% !important;
@@ -64,12 +87,9 @@ pre#_markdown {
   margin: 0 !important;
 }
 
-/*mermaid text bold effect*/
-svg[id^=mermaid] text {
-  stroke: none !important;
-}
+/*-----------------------------------------------------------------------------
+  toc*/
 
-/*toc*/
 body {
   display: flex;
 }
@@ -78,9 +98,9 @@ body._toc-right { padding-right: 300px !important; }
 #_toc {
   position: fixed;
   top: 0; bottom: 0; left: 0;
-  width: 300px;
+  width: 299px;
   height: 100%;
-  background: #fafafa;
+  border-right: 1px solid #e1e4e8; /*light themes*/
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -89,22 +109,167 @@ body._toc-right { padding-right: 300px !important; }
   margin: 0 !important;
 }
 #_toc ._ul a {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-  font-size: 14px !important;
-  line-height: 17px !important;
-  color: #364149 !important;
-  font-weight: normal !important;
-  font-style: normal !important;
-  text-decoration: none !important;
-  text-transform: none !important;
-  letter-spacing: 0.2px !important;
-  background: none !important;
   border: 0 !important;
-  padding: 10px 15px !important;
+  padding: 5px 10px !important;
   display: block !important;
 }
-#_toc ._ul a:hover {
-  text-decoration: underline !important;
+#_toc > ._ul {
+  padding: 0 0 0 10px !important;
+}
+
+/*-----------------------------------------------------------------------------
+  light-themes*/
+
+/*scrollbar*/
+body:not(._theme-water, ._theme-water-dark)::-webkit-scrollbar,
+body:not(._theme-water, ._theme-water-dark) *::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+body:not(._theme-water, ._theme-water-dark)::-webkit-scrollbar-track,
+body:not(._theme-water, ._theme-water-dark) *::-webkit-scrollbar-track {
+  background: #efefef;
+  border-radius: 6px;
+}
+
+body:not(._theme-water, ._theme-water-dark)::-webkit-scrollbar-thumb,
+body:not(._theme-water, ._theme-water-dark) *::-webkit-scrollbar-thumb {
+  background: #d5d5d5;
+  border-radius: 6px;
+}
+
+body:not(._theme-water, ._theme-water-dark)::-webkit-scrollbar-thumb:hover,
+body:not(._theme-water, ._theme-water-dark) *::-webkit-scrollbar-thumb:hover {
+  background: #c4c4c4;
+}
+
+/*-----------------------------------------------------------------------------
+  dark-themes*/
+
+/*scrollbar*/
+body._theme-github-dark::-webkit-scrollbar,
+body._theme-github-dark *::-webkit-scrollbar,
+body._theme-markdown-retro::-webkit-scrollbar,
+body._theme-markdown-retro *::-webkit-scrollbar,
+body._theme-sakura-vader::-webkit-scrollbar,
+body._theme-sakura-vader *::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+body._theme-github-dark::-webkit-scrollbar-track,
+body._theme-github-dark *::-webkit-scrollbar-track,
+body._theme-markdown-retro::-webkit-scrollbar-track,
+body._theme-markdown-retro *::-webkit-scrollbar-track,
+body._theme-sakura-vader::-webkit-scrollbar-track,
+body._theme-sakura-vader *::-webkit-scrollbar-track {
+  background: #424242;
+  border-radius: 6px;
+}
+
+body._theme-github-dark::-webkit-scrollbar-thumb,
+body._theme-github-dark *::-webkit-scrollbar-thumb,
+body._theme-markdown-retro::-webkit-scrollbar-thumb,
+body._theme-markdown-retro *::-webkit-scrollbar-thumb,
+body._theme-sakura-vader::-webkit-scrollbar-thumb,
+body._theme-sakura-vader *::-webkit-scrollbar-thumb {
+  background: #686868;
+  border-radius: 6px;
+}
+
+body._theme-github-dark::-webkit-scrollbar-thumb:hover,
+body._theme-github-dark *::-webkit-scrollbar-thumb:hover,
+body._theme-markdown-retro::-webkit-scrollbar-thumb:hover,
+body._theme-markdown-retro *::-webkit-scrollbar-thumb:hover,
+body._theme-sakura-vader::-webkit-scrollbar-thumb:hover,
+body._theme-sakura-vader *::-webkit-scrollbar-thumb:hover {
+  background: #7b7b7b;
+}
+
+/*code block*/
+._theme-markdown-retro pre,
+._theme-sakura-vader pre,
+._theme-water-dark pre {
+  background-color: #161b22 !important;
+}
+
+/*toc delimiter*/
+._theme-github-dark #_toc,
+._theme-markdown-retro #_toc,
+._theme-sakura-vader #_toc,
+._theme-water-dark #_toc {
+  border-right: 1px solid #30363d;
+}
+
+/*github-dark*/
+._theme-github-dark {
+  background-color:#0d1117;
+}
+._theme-github-dark .markdown-body{
+  border: 1px solid #30363d;
+}
+
+/*-----------------------------------------------------------------------------
+  theme fixes*/
+
+/*github - toc*/
+._theme-github #_toc { /*.markdown-body {*/
+  background-color: #fff;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+._theme-github #_toc a { /*.markdown-body a {*/
+  background-color: transparent;
+  color: #0969da;
+  text-decoration: none;
+}
+._theme-github #_toc a:hover {
+  text-decoration: underline;
+}
+/*github-dark - toc*/
+._theme-github-dark #_toc { /*.markdown-body {*/
+  background-color: #0d1117;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+._theme-github-dark #_toc a { /*.markdown-body a {*/
+  background-color: transparent;
+  color: #58a6ff;
+  text-decoration: none;
+}
+._theme-github-dark #_toc a:hover {
+  text-decoration: underline;
+}
+
+/*superstylin - fix lists*/
+._theme-superstylin ul ul,
+._theme-superstylin ol ol {
+  padding-left: 40px;
+}
+._theme-superstylin ul li p,
+._theme-superstylin ol li p {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+/*markdown-air - fix images*/
+._theme-markdown-air img {
+  border-radius: 0;
+  width: auto;
+  height: auto;
+}
+
+/*-----------------------------------------------------------------------------
+  misc*/
+
+/*mermaid text bold effect*/
+svg[id^=mermaid] text {
+  stroke: none !important;
 }
 
 /*anchor link*/

content/index.js

@@ -81,10 +81,22 @@ function mount () {
       }
       else {
         if (state.theme) {
+          var included = Array.from($('body').classList).filter((name) => /^_theme/.test(name))
+          if (included.length) {
+            $('body').classList.remove(included)
+          }
           dom.push(m('link#_theme', {
             rel: 'stylesheet', type: 'text/css',
             href: chrome.runtime.getURL(`/themes/${state.theme}.css`),
           }))
+          $('body').classList.add(`_theme-${state.theme}`)
+
+          var prism = ['github-dark', 'markdown-retro', 'sakura-vader', 'water-dark']
+            .includes(state.theme) ? 'prism-okaidia' : 'prism'
+          dom.push(m('link#_prism', {
+            rel: 'stylesheet', type: 'text/css',
+            href: chrome.runtime.getURL(`/vendor/${prism}.min.css`),
+          }))
         }
         if (state.html) {
           dom.push(m('#_html', {oncreate: oncreate.html,

manifest.json

@@ -4,6 +4,14 @@
   "version"         : "5.0",
   "description"     : "Markdown Viewer",
 
+  "homepage_url": "https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk",
+
+  "icons": {
+    "16" : "/icons/icon16.png",
+    "48" : "/icons/icon48.png",
+    "128": "/icons/icon128.png"
+  },
+
   "action": {
     "default_icon": {
       "19" : "/icons/icon19.png",
@@ -13,12 +21,12 @@
     "default_popup": "/popup/index.html"
   },
 
-  "options_page": "/options/index.html",
-
   "background" : {
     "service_worker": "/background/index.js"
   },
 
+  "options_page": "/options/index.html",
+
   "web_accessible_resources": [
     {
       "matches": [
@@ -27,19 +35,13 @@
       "resources": [
         "/themes/*",
         "/vendor/mathjax/*",
+        "/vendor/prism.min.css",
+        "/vendor/prism-okaidia.min.css",
         "/content/mathjax.js"
       ]
     }
   ],
 
-  "icons": {
-    "16" : "/icons/icon16.png",
-    "48" : "/icons/icon48.png",
-    "128": "/icons/icon128.png"
-  },
-
-  "homepage_url": "https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk",
-
   "permissions": [
     "storage",
     "scripting"

popup/index.js

@@ -8,24 +8,36 @@ var state = {
   _themes: [
     'github',
     'github-dark',
-    'godspeed',
-    'new-modern',
-    'torpedo',
-    'vostok',
-    'ghostwriter',
-    'radar',
-    'foghorn',
-    'markdown',
-    'markedapp-byword',
-    'solarized-dark',
-    'solarized-light',
-    'screen',
-    'markdown5',
-    'markdown6',
-    'markdown7',
-    'markdown8',
-    'markdown9',
-    'markdown-alt',
+    'almond',
+    'awsm',
+    'axist',
+    'bamboo',
+    'bullframe',
+    'holiday',
+    'kacit',
+    'latex',
+    'markdown-splendor',
+    'markdown-retro',
+    'markdown-air',
+    'markdown-modest',
+    'marx',
+    'minicss',
+    'new',
+    'no-class',
+    'pico',
+    'sakura',
+    'sakura-vader',
+    'semantic',
+    'simplecss',
+    'style-sans',
+    'style-serif',
+    'stylize',
+    'superstylin',
+    'tacit',
+    'vanilla',
+    'water',
+    'water-dark',
+    'writ',
   ],
   raw: false,
   tab: '',