feat: support theme

.eslintrc.js

@@ -12,4 +12,3 @@ module.exports = {
     sourceType: 'module'
   }
 }
-

.github/workflows/main.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: |
+        npm i
+        npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda code
+        run: |
+          npm i
+          npm run build
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v2.1.0 (29 Nov 2020)
+
+* feat: support theme
+
 ## v2.0.0 (6 Jan 2020)
 
 * feat: theme support

README.md

@@ -1,21 +1,21 @@
 # eruda-code
 
 [![NPM version][npm-image]][npm-url]
-[![Build status][travis-image]][travis-url]
+[![Build status][ci-image]][ci-url]
 [![License][license-image]][npm-url]
 
 [npm-image]: https://img.shields.io/npm/v/eruda-code.svg
 [npm-url]: https://npmjs.org/package/eruda-code
-[travis-image]: https://img.shields.io/travis/liriliri/eruda-code.svg
-[travis-url]: https://travis-ci.org/liriliri/eruda-code
+[ci-image]: https://img.shields.io/github/workflow/status/liriliri/eruda-code/CI?style=flat-square
+[ci-url]: https://github.com/liriliri/eruda-code/actions/workflows/main.yml
 [license-image]: https://img.shields.io/npm/l/eruda-code.svg
 
 Eruda plugin for running JavaScript code.
 
 ## Demo
 
 Browse it on your phone: 
-[http://eruda.liriliri.io/](http://eruda.liriliri.io/)
+[http://eruda.liriliri.io/?plugin=code](http://eruda.liriliri.io/?plugin=code)
 
 ## Install
 

package.json

@@ -1,24 +1,22 @@
 {
   "name": "eruda-code",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Eruda plugin for running JavaScript code",
   "main": "eruda-code.js",
   "scripts": {
     "dev": "webpack-dev-server --host 0.0.0.0",
     "build": "webpack -p",
     "ci": "npm run lint && npm run build",
-    "lint": "eslint src/**/*.js",
-    "format": "prettier src/**/*.js src/**/*.scss *.js index.html --write"
+    "lint": "eslint \"src/**/*.js\"",
+    "format": "prettier \"src/**/*.js\" \"src/**/*.scss\" \"*.js\" \"index.html\" --write"
   },
+  "files": [
+    "eruda-code*"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/liriliri/eruda-code.git"
   },
-  "eustia": {
-    "files": "src/*.js",
-    "output": "src/util.js",
-    "format": "es"
-  },
   "keywords": [
     "eruda",
     "plugin"
@@ -38,10 +36,12 @@
     "babel-loader": "^8.0.6",
     "codemirror": "^5.50.2",
     "css-loader": "^3.4.1",
-    "eruda": "^2.0.0",
+    "eruda": "^2.6.1",
     "eslint": "^6.6.0",
     "handlebars": "^4.5.1",
     "handlebars-loader": "^1.7.1",
+    "js-beautify": "^1.14.7",
+    "licia": "^1.37.0",
     "node-sass": "^4.13.0",
     "postcss": "^7.0.21",
     "postcss-class-prefix": "^0.3.0",

src/CodeMirror.css

@@ -1,36 +1,41 @@
 .CodeMirror {
   height: 100%;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.CodeMirror-gutters {
+  background: var(--background);
+  border-color: var(--border);
 }
 
 /* Sync style with chrome dev-tool */
-.cm-keyword {
-  color: hsl(310, 86%, 36%);
+.cm-s-default .cm-keyword {
+  color: var(--keyword-color);
 }
-.cm-number {
-  color: hsl(248, 100%, 41%);
+.cm-s-default .cm-number {
+  color: var(--number-color);
 }
-.cm-comment {
-  color: hsl(120, 100%, 23%) !important;
+.cm-s-default .cm-comment {
+  color: var(--comment-color) !important;
   font-style: italic;
 }
-.cm-string {
-  color: hsl(1, 80%, 43%) !important;
-}
-.cm-string-2 {
-  color: hsl(1, 99%, 39%) !important;
+.cm-s-default .cm-string,
+.cm-s-default .com-string-2 {
+  color: var(--string-color);
 }
 .cm-atom {
-  color: hsl(310, 86%, 36%);
+  color: var(--attribute-name-color);
 }
-.cm-def {
-  color: hsl(240, 73%, 38%);
+.cm-s-default .cm-def {
+  color: var(--foreground);
 }
 .cm-operator {
-  color: hsl(27, 100%, 30%);
+  color: var(--operator-color);
 }
-.cm-meta {
-  color: hsl(27, 100%, 30%);
+.cm-s-default .cm-meta {
+  color: var(--tag-name-color);
 }
-.cm-variable-2 {
-  color: hsl(240, 73%, 38%);
+.cm-s-default .cm-variable-2 {
+  color: var(--var-color);
 }

src/code.js

@@ -1,16 +1,21 @@
 import CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
-import { nextTick, copy } from './util'
+import nextTick from 'licia/nextTick'
+import copy from 'licia/copy'
+import beautify from 'js-beautify'
 
 export default function(eruda) {
-  let { evalCss, beautify } = eruda.util
+  let { evalCss } = eruda.util
 
   class Code extends eruda.Tool {
     constructor() {
       super()
       this.name = 'code'
       this._style = evalCss(require('./style.scss'))
-      this._CodeMirrorStyle = evalCss(require('codemirror/lib/codemirror.css'))
+      this._CodeMirrorStyle = evalCss(
+        require('codemirror/lib/codemirror.css') +
+          require('codemirror/theme/material-darker.css')
+      )
       this._CodeMirrorCustomStyle = evalCss(require('./CodeMirror.css'))
       this._editor = null
     }
@@ -50,6 +55,7 @@ export default function(eruda) {
     }
     copy() {
       copy(this._editor.getValue())
+      eruda.get().notify('Copied')
     }
     clear() {
       this._editor.setValue('')

src/style.scss

@@ -23,7 +23,7 @@ $anim-duration: 0.3s;
       width: 25%;
       border-right: 1px solid var(--border);
       display: inline-block;
-      transition: background $anim-duration, color $anim-duration;
+      transition: background-color $anim-duration, color $anim-duration;
       &:active {
         background: var(--highlight);
         color: var(--select-foreground);