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.
This commit is contained in:
Maximilian Krög
2020-07-25 19:27:38 +02:00
parent e723061f9b
commit e39e3ea152
7 changed files with 311 additions and 205 deletions

View File

@@ -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) {