Website: Use Keep markup to highlight code section (#3164)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
diff --git a/assets/style.css b/assets/style.css
index dc16a0d..77a8dbc 100644
--- a/assets/style.css
+++ b/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,
diff --git a/index.html b/index.html
index 37096eb..863e599 100644
--- a/index.html
+++ b/index.html
@@ -133,13 +133,13 @@
<pre><code><!DOCTYPE html>
<html>
<head>
- ...</code>
- <code class="highlight"><link href="themes/prism.css" rel="stylesheet" /></code>
-<code></head>
+ ...
+ <mark><link href="themes/prism.css" rel="stylesheet" /></mark>
+</head>
<body>
- ...</code>
- <code class="highlight"><script src="prism.js"></script></code>
-<code></body>
+ ...
+ <mark><script src="prism.js"></script></mark>
+</body>
</html></code></pre>
<p>Prism does its best to encourage good authoring practices. Therefore, it only works with <code><code></code> elements, since marking up code without a <code><code></code> element is semantically invalid.
@@ -192,18 +192,18 @@ window.Prism.manual = true;
<pre><code><!DOCTYPE html>
<html>
<head>
- ...</code>
- <code class="highlight"><link href="https://{{cdn}}/prism@v1.x/themes/prism.css" rel="stylesheet" /></code>
-<code></head>
+ ...
+ <mark><link href="https://{{cdn}}/prism@v1.x/themes/prism.css" rel="stylesheet" /></mark>
+</head>
<body>
- ...</code>
-<code class="highlight" style="display: inline-block; outline-offset: .2em; margin-bottom: .2em;"> <script src="https://{{cdn}}/prism@v1.x/components/prism-core.min.js"></script>
- <script src="https://{{cdn}}/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script></code>
-<code></body>
+ ...
+<mark> <script src="https://{{cdn}}/prism@v1.x/components/prism-core.min.js"></script>
+ <script src="https://{{cdn}}/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script></mark>
+</body>
</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 @@ const html = Prism.highlight(code, Prism.languages.haml, 'haml');</code></pre>
<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>