80 lines
2.1 KiB
HTML
80 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<link rel="icon" href="favicon.png" />
|
||
|
|
<title>Keep markup ▲ Prism plugins</title>
|
||
|
|
<base href="../.." />
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
code[class*="language-"] mark,
|
||
|
|
pre[class*="language-"] mark {
|
||
|
|
display: inline-block;
|
||
|
|
color: inherit;
|
||
|
|
background: none;
|
||
|
|
border: 1px solid #000;
|
||
|
|
box-shadow: 0 0 2px #fff;
|
||
|
|
padding: 1px;
|
||
|
|
background: rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="prefixfree.min.js"></script>
|
||
|
|
|
||
|
|
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
|
||
|
|
<script src="https://www.google-analytics.com/ga.js" async></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
|
||
|
|
|
||
|
|
<h2>Keep markup</h2>
|
||
|
|
<p>Prevents custom markup from being dropped out during highlighting.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
|
||
|
|
<h1>How to use</h1>
|
||
|
|
<p>You have nothing to do. With this plugin loaded, all markup inside code will be kept.</p>
|
||
|
|
|
||
|
|
<h1>Examples</h1>
|
||
|
|
|
||
|
|
<p>The following source code</p>
|
||
|
|
<pre><code class="language-markup"><pre><code class="language-css">
|
||
|
|
@media <mark>screen</mark> {
|
||
|
|
div {
|
||
|
|
<mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>;
|
||
|
|
back<mark>ground: url</mark>('foo.png');
|
||
|
|
}
|
||
|
|
}</code></pre></code></pre>
|
||
|
|
|
||
|
|
<p>would render like this:</p>
|
||
|
|
<pre><code class="language-css">
|
||
|
|
@media <mark>screen</mark> {
|
||
|
|
div {
|
||
|
|
<mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>;
|
||
|
|
back<mark>ground: url</mark>('foo.png');
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
It also works for inline code:
|
||
|
|
<code class="language-javascript">v<mark>ar b</mark>ar = <mark>func</mark>tion () { <mark>/*</mark> foo <mark>*</mark>/ };</code>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer data-src="templates/footer.html" data-type="text/html"></footer>
|
||
|
|
|
||
|
|
<script src="prism.js"></script>
|
||
|
|
<script src="plugins/keep-markup/prism-keep-markup.js"></script>
|
||
|
|
<script src="utopia.js"></script>
|
||
|
|
<script src="components.js"></script>
|
||
|
|
<script src="code.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|