Update prism js version

Use latest version of prism, add json formatter, copy to clipboard plugin, and line-numbers. Now the clipboard js is automatically loaded by prism it it not included and the buttons are automatically initialized. Though I added some css to match the previous style.
2020-07-25 19:27:38 +02:00
parent e723061f9b
commit e39e3ea152
7 changed files with 311 additions and 205 deletions
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -7,19 +7,6 @@
      .replace(/=+$/, ``);
  }

-  var htmlClipboard = new Clipboard('#copy-html-button');
-  htmlClipboard.on('success', function(e) {
-    e.clearSelection();
-  });
-  var jsClipboard = new Clipboard('#copy-js-button');
-  jsClipboard.on('success', function(e) {
-    e.clearSelection();
-  });
-  var pkgClipboard = new Clipboard('#copy-pkg-button');
-  pkgClipboard.on('success', function(e) {
-    e.clearSelection();
-  });
-
  function fetchResource(resource) {
    return new Promise((resolve, reject) => {
      const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource);
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -133,34 +133,16 @@ ol.inline>li {
  width: 100%;
 }

-pre[class*="language-"] {
-  margin-top: 20px;
-  background: #FFFFFF;
-}
-
-pre>legend {
-  font-size: 100%;
+.source-heading {
+  margin-top: 1em;
+  margin-bottom: 0;
+  padding-left: .6em;
  font-weight: bold;
 }

-.source-controls {
-  position: absolute;
-  margin-top: 10px;
-  right: 40px;
-}
-
-.source-controls a {
-  margin-left: 15px;
-}
-
-.copy-button {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.codepen-button {
-  text-decoration: none;
-  cursor: pointer;
+pre[class*="language-"] {
+  background: #FFFFFF;
+  font-size: 87.5%;
 }

 pre {
@@ -178,3 +160,36 @@ pre {
  margin-top: -10px;
  margin-bottom: 10px;
 }
+
+/* restyle prism copy button */
+div.code-toolbar > .toolbar {
+  opacity: 1;
+  top: -2.4em;
+}
+div.code-toolbar > .toolbar button {
+  font-size: 16px;
+  color: #03899c;
+  background-color: transparent;
+  box-shadow: none;
+  padding: .615rem .75rem;
+}
+
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus {
+  color: #ff7a00;
+}
+div.code-toolbar > .toolbar button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+}
+div.code-toolbar > .toolbar button:before {
+  margin-right: .184em;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  content: "\f0ea";
+  font-size: 1.33333333em;
+  line-height: .75em;
+  vertical-align: middle;
+}
--- a/examples/resources/prism/prism-1.20.0.css
+++ b/examples/resources/prism/prism-1.20.0.css
@@ -0,0 +1,249 @@
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json&plugins=line-numbers+toolbar+copy-to-clipboard */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	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;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+
--- a/examples/resources/prism/prism-1.20.0.min.js
+++ b/examples/resources/prism/prism-1.20.0.min.js
--- a/examples/resources/prism/prism.css
+++ b/examples/resources/prism/prism.css
@@ -1,140 +0,0 @@
-/* PrismJS 1.10.0
-http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: black;
-	background: none;
-	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	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;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	text-shadow: none;
-	background: #b3d4fc;
-}
-
-@media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
-		text-shadow: none;
-	}
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: slategray;
-}
-
-.token.punctuation {
-	color: #999;
-}
-
-.namespace {
-	opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-	color: #a67f59;
-	background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-	color: #07a;
-}
-
-.token.function {
-	color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-	color: #e90;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
--- a/examples/resources/prism/prism.min.js
+++ b/examples/resources/prism/prism.min.js
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -64,14 +64,13 @@
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
+    <link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
    <link rel="stylesheet" href="./css/ol.css" type="text/css">
    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://unpkg.com/elm-pep"></script>
    {{{ extraHead.local }}}
    {{{ css.tag }}}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
    <title>{{ title }}</title>
  </head>
  <body>
@@ -112,7 +111,7 @@
      </nav>
    </header>

-    <div class="container-fluid">
+    <div class="container-fluid line-numbers">

      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
        <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -180,18 +179,14 @@
      </div>

      <div class="row-fluid">
-        <div class="source-controls">
-          <button class="copy-button btn btn-link" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
-        </div>
-        <pre><legend>main.js</legend><hr /><code id="example-js-source" class="language-js">import 'ol/ol.css';
+        <h5 class="source-heading">main.js</h5>
+        <pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
 {{ js.source }}</code></pre>
      </div>

      <div class="row-fluid">
-        <div class="source-controls">
-          <button class="copy-button btn btn-link" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
-        </div>
-        <pre><legend>index.html</legend><hr /><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
+        <h5 class="source-heading">index.html</h5>
+        <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;{{ title }}&lt;/title&gt;
@@ -215,25 +210,21 @@

 {{#if worker.source}}
      <div class="row-fluid">
-        <div class="source-controls">
-          <button class="copy-button btn btn-link" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
-        </div>
-        <pre><legend>worker.js</legend><hr /><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
+        <h5 class="source-heading">worker.js</h5>
+        <pre><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
      </div>
 {{/if}}

      <div class="row-fluid">
-        <div class="source-controls">
-          <button class="copy-button btn btn-link" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
-        </div>
-        <pre><legend>package.json</legend><hr /><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
+        <h5 class="source-heading">package.json</h5>
+        <pre><code id="example-pkg-source" class="language-json">{{ pkgJson }}</code></pre>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
+    <script src="./resources/prism/prism-1.20.0.min.js"></script>
    <script src="./resources/common.js"></script>
-    <script src="./resources/prism/prism.min.js"></script>
    {{{ js.tag }}}
    <script>
      $('#tag-example-list').on('show.bs.modal', function (event) {