79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="assets/favicon.png" />
|
|
<title>Keep markup ▲ Prism plugins</title>
|
|
<base href="../.." />
|
|
<link rel="stylesheet" href="assets/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="assets/vendor/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 data-plugin-header="keep-markup"></header>
|
|
|
|
<section>
|
|
|
|
<h1>How to use</h1>
|
|
|
|
<p>You have nothing to do. The plugin is active by default. With this plugin loaded, all markup inside code will be kept.</p>
|
|
|
|
<p>However, you can deactivate the plugin for certain code element by adding the <code>no-keep-markup</code> class to it. You can also deactivate the plugin for the whole page by adding the <code>no-keep-markup</code> class to the body of the page and then selectively activate it again by adding the <code>keep-markup</code> class to code elements.</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="assets/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="assets/vendor/utopia.js"></script>
|
|
<script src="components.js"></script>
|
|
<script src="assets/code.js"></script>
|
|
|
|
</body>
|
|
</html>
|