Website: Use Keep markup to highlight code section (#3164)

Author: RunDevelopment

assets/style.css

@@ -112,9 +112,10 @@ pre {
 	overflow: auto;
 }
 
-pre > code.highlight {
+mark {
 	outline: .4em solid red;
 	outline-offset: .4em;
+	background-color: transparent;
 }
 
 header,

index.html

@@ -133,13 +133,13 @@ <h1>Basic usage</h1>
 	<pre><code>&lt;!DOCTYPE html>
 &lt;html>
 &lt;head>
-	...</code>
-	<code class="highlight">&lt;link href="themes/prism.css" rel="stylesheet" /></code>
-<code>&lt;/head>
+	...
+	<mark>&lt;link href="themes/prism.css" rel="stylesheet" /></mark>
+&lt;/head>
 &lt;body>
-	...</code>
-	<code class="highlight">&lt;script src="prism.js">&lt;/script></code>
-<code>&lt;/body>
+	...
+	<mark>&lt;script src="prism.js">&lt;/script></mark>
+&lt;/body>
 &lt;/html></code></pre>
 
 	<p>Prism does its best to encourage good authoring practices. Therefore, it only works with <code>&lt;code></code> elements, since marking up code without a <code>&lt;code></code> element is semantically invalid.
@@ -192,18 +192,18 @@ <h2 id="basic-usage-cdn">Usage with CDNs</h2>
 	<pre><code>&lt;!DOCTYPE html>
 &lt;html>
 &lt;head>
-	...</code>
-	<code class="highlight">&lt;link href="https://{{cdn}}/prism@v1.x/themes/prism.css" rel="stylesheet" /></code>
-<code>&lt;/head>
+	...
+	<mark>&lt;link href="https://{{cdn}}/prism@v1.x/themes/prism.css" rel="stylesheet" /></mark>
+&lt;/head>
 &lt;body>
-	...</code>
-<code class="highlight" style="display: inline-block; outline-offset: .2em; margin-bottom: .2em;">	&lt;script src="https://{{cdn}}/prism@v1.x/components/prism-core.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://{{cdn}}/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"&gt;&lt;/script&gt;</code>
-<code>&lt;/body>
+	...
+<mark>	&lt;script src="https://{{cdn}}/prism@v1.x/components/prism-core.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://{{cdn}}/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"&gt;&lt;/script&gt;</mark>
+&lt;/body>
 &lt;/html></code></pre>
 
 	<p>Please note that links in the above code sample serve as placeholders. You have to replace them with valid links to the CDN of your choice.</p>
-	
+
 	<p>CDNs which provide PrismJS are e.g. <a href="https://cdnjs.com/libraries/prism">cdnjs</a>, <a href="https://www.jsdelivr.com/package/npm/prismjs">jsDelivr</a>, and <a href="https://unpkg.com/browse/prismjs@1/">UNPKG</a>.</p>
 
 	<h2 id="basic-usage-bundlers">Usage with Webpack, Browserify, & Other Bundlers</h2>
@@ -322,6 +322,7 @@ <h1>Credits</h1>
 
 <script src="assets/vendor/utopia.js"></script>
 <script src="prism.js"></script>
+<script src="plugins/keep-markup/prism-keep-markup.js"></script>
 <script src="components.js"></script>
 <script src="assets/code.js"></script>
 <script>