Bump 'Marked' to v4.0.1

package.json

@@ -20,14 +20,14 @@
  "build:min": "esmtk minify src/wc-markdown.js index.min.js",
  "copy": "npm run copy:themes && npm run copy:components",
  "copy:themes": "cp -r node_modules/prism-es6/themes themes",
- "copy:components": "cp -r node_modules/prism-es6/components components",
+ "copy:components": "cp -r node_modules/prism-es6/components .",
  "package": "npx rimraf package && npm pack | tail -n 1 | xargs tar -xf",
  "preversion": "npm run lint",
  "postversion": "git push --follow-tags"
  },
  "devDependencies": {
  "esmtk": "^0.5.6",
- "marked": "^2.0.3",
+ "marked": "^4.0.1",
  "prism-es6": "^1.2.0"
  },
  "standard": {

src/wc-markdown.js

@@ -1,6 +1,6 @@
 /* eslint no-undef: 0 */
 import Prism from '../node_modules/prism-es6/prism.js'
-import Marked from '../node_modules/marked/lib/marked.esm.js'
+import { marked } from '../node_modules/marked/lib/marked.esm.js'
 
 self.Prism = Prism
 
@@ -80,7 +80,7 @@ export class WCMarkdown extends HTMLElement {
  }
 
  static toHtml (markdown) {
- return Marked(markdown)
+ return marked(markdown)
  }
 
  static highlight (element) {

themes/themes/prism-coy.css

@@ -0,0 +1,226 @@
+/**
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http:https://workshop.kansan.com/category/sessions/basics or http:https://workshop.timshedor.com/category/sessions/basics);
+ * @author Tim Shedor
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ background: none;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ position: relative;
+ margin: .5em 0;
+ overflow: visible;
+ padding: 0;
+}
+pre[class*="language-"]>code {
+ position: relative;
+ border-left: 10px solid #358ccb;
+ box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+ background-color: #fdfdfd;
+ background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+ background-size: 3em 3em;
+ background-origin: content-box;
+ background-attachment: local;
+}
+
+code[class*="language"] {
+ max-height: inherit;
+ height: inherit;
+ padding: 0 1em;
+ display: block;
+ overflow: auto;
+}
+
+/* Margin bottom to accommodate shadow */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background-color: #fdfdfd;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-bottom: 1em;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ position: relative;
+ padding: .2em;
+ border-radius: 0.3em;
+ color: #c92c2c;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ display: inline;
+ white-space: normal;
+}
+
+pre[class*="language-"]:before,
+pre[class*="language-"]:after {
+ content: '';
+ z-index: -2;
+ display: block;
+ position: absolute;
+ bottom: 0.75em;
+ left: 0.18em;
+ width: 40%;
+ height: 20%;
+ max-height: 13em;
+ box-shadow: 0px 13px 8px #979797;
+ -webkit-transform: rotate(-2deg);
+ -moz-transform: rotate(-2deg);
+ -ms-transform: rotate(-2deg);
+ -o-transform: rotate(-2deg);
+ transform: rotate(-2deg);
+}
+
+:not(pre) > code[class*="language-"]:after,
+pre[class*="language-"]:after {
+ right: 0.75em;
+ left: auto;
+ -webkit-transform: rotate(2deg);
+ -moz-transform: rotate(2deg);
+ -ms-transform: rotate(2deg);
+ -o-transform: rotate(2deg);
+ transform: rotate(2deg);
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #7D8B99;
+}
+
+.token.punctuation {
+ color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+ color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+ color: #a67f59;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+ color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+ color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+ color: #a67f59;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+ font-weight: normal;
+}
+
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+@media screen and (max-width: 767px) {
+ pre[class*="language-"]:before,
+ pre[class*="language-"]:after {
+ bottom: 14px;
+ box-shadow: none;
+ }
+
+}
+
+/* Plugin styles */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before {
+ color: #e0d7d1;
+}
+
+/* Plugin styles: Line Numbers */
+pre[class*="language-"].line-numbers.line-numbers {
+ padding-left: 0;
+}
+
+pre[class*="language-"].line-numbers.line-numbers code {
+ padding-left: 3.8em;
+}
+
+pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
+ left: 0;
+}
+
+/* Plugin styles: Line Highlight */
+pre[class*="language-"][data-line] {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+}
+pre[data-line] code {
+ position: relative;
+ padding-left: 4em;
+}
+pre .line-highlight {
+ margin-top: 0;
+}

themes/themes/prism-dark.css

@@ -0,0 +1,129 @@
+/**
+ * prism.js Dark theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: white;
+ background: none;
+ text-shadow: 0 -.1em .2em black;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+@media print {
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+ background: hsl(30, 20%, 25%);
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+ border: .3em solid hsl(30, 20%, 40%);
+ border-radius: .5em;
+ box-shadow: 1px 1px .5em black inset;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .15em .2em .05em;
+ border-radius: .3em;
+ border: .13em solid hsl(30, 20%, 40%);
+ box-shadow: 1px 1px .3em -.1em black inset;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: hsl(30, 20%, 50%);
+}
+
+.token.punctuation {
+ opacity: .7;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+ color: hsl(350, 40%, 70%);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: hsl(75, 70%, 60%);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+ color: hsl(40, 90%, 60%);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: hsl(350, 40%, 70%);
+}
+
+.token.regex,
+.token.important {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.deleted {
+ color: red;
+}