algorithm/CS-Notes
1
0
Fork 0
mirror of https://github.com/CyC2018/CS-Notes.git synced 2025-08-03 04:00:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

use prism-tomorrow.css

Browse Source
This commit is contained in:
CyC2018
2018-12-19 14:09:39 +08:00
parent 0f00bcacaf
commit e9e604e6a7
1747 changed files with 100462 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
docs/_style/prism-master/plugins/toolbar/index.html Normal file
View File

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.png" />
<title>Toolbar ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<link rel="stylesheet" href="plugins/toolbar/prism-toolbar.css" data-noprefix />
<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 class="language-markup" data-toolbar-order="select-code,hello-world,label">
<header>
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
<h2>Toolbar</h2>
<p>Attach a toolbar for plugins to easily register buttons on the top of a code block.</p>
</header>
<section>
<h1>How to use</h1>
<p>The Toolbar plugin allows for several methods to register your button, using the <code>Prism.plugins.toolbar.registerButton</code> function.</p>
<p>The simplest method is through the HTML API. Add a <code>data-label</code> attribute to the <code>pre</code> element, and the Toolbar
plugin will read the value of that attribute and append a label to the code snippet.</p>
<pre data-label="Hello World!"><code class="language-markup">&lt;pre data-src=&quot;plugins/toolbar/prism-toolbar.js&quot; data-label=&quot;Hello World!&quot;&gt;&lt;/pre&gt;</code></pre>
<p>If you want to provide arbitrary HTML to the label, create a <code>template</code> element with the HTML you want in the label, and provide the
<code>template</code> element's <code>id</code> to <code>data-label</code>. The Toolbar plugin will use the template's content for the button.
You can also use to declare your event handlers inline:</p>
<pre data-label="my-label-button"><code class="language-markup">&lt;pre data-src=&quot;plugins/toolbar/prism-toolbar.js&quot; data-label=&quot;my-label-button&quot;&gt;&lt;/pre&gt;</code></pre>
<pre><code>&lt;template id=&quot;my-label-button&quot;&gt;&lt;button onclick=&quot;console.log('This is an inline-handler');&quot;&gt;My button&lt;/button&gt;&lt;/template&gt;</code></pre>
<p>For more flexibility, the Toolbar exposes a JavaScript function that can be used to register new buttons or labels to the Toolbar,
<code>Prism.plugins.toolbar.registerButton</code>.</p>
<p>The function accepts a key for the button and an object with a <code>text</code> property string and an optional
<code>onClick</code> function or <code>url</code> string. The <code>onClick</code> function will be called when the button is clicked, while the
<code>url</code> property will be set to the anchor tag's <code>href</code>.</p>
<pre><code class="language-javascript">Prism.plugins.toolbar.registerButton('hello-world', {
text: 'Hello World!', // required
onClick: function (env) { // optional
alert('This code snippet is written in ' + env.language + '.');
}
});</code></pre>
<p>See how the above code registers the <code>Hello World!</code> button? You can use this in your plugins to register your own buttons with the toolbar.</p>
<p>If you need more control, you can provide a function to <code>registerButton</code> that returns either a <code>span</code>, <code>a</code>, or
<code>button</code> element.</p>
<pre><code class="language-javascript">Prism.plugins.toolbar.registerButton('select-code', function() {
var button = document.createElement('button');
button.innerHTML = 'Select Code';
button.addEventListener('click', function () {
// Source: http://stackoverflow.com/a/11128179/2757940
if (document.body.createTextRange) { // ms
var range = document.body.createTextRange();
range.moveToElementText(env.element);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(env.element);
selection.removeAllRanges();
selection.addRange(range);
}
});
return button;
});</code></pre>
<p>The above function creates the Select Code button you see, and when you click it, the code gets highlighted.</p>
<p>By default, the buttons will be added to the code snippet in the order they were registered. If more control over
the order is needed, an HTML attribute can be added to the <code>body</code> tag with a comma-separated string indicating the
order.</p>
<pre><code>&lt;body data-toolbar-order="select-code,hello-world,label"&gt;</code></pre>
</section>
<footer data-src="templates/footer.html" data-type="text/html"></footer>
<template id="my-label-button"><button onclick="console.log('This is an inline-handler');">My button</button></template>
<script src="prism.js"></script>
<script src="plugins/toolbar/prism-toolbar.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script>
Prism.plugins.toolbar.registerButton('hello-world', {
text: 'Hello World!', // required
onClick: function (env) { // optional
alert('This code snippet is written in ' + env.language + '.');
}
});
</script>
<script>
Prism.plugins.toolbar.registerButton('select-code', function(env) {
var button = document.createElement('button');
button.innerHTML = 'Select Code';
button.addEventListener('click', function () {
// Source: http://stackoverflow.com/a/11128179/2757940
if (document.body.createTextRange) { // ms
var range = document.body.createTextRange();
range.moveToElementText(env.element);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(env.element);
selection.removeAllRanges();
selection.addRange(range);
}
});
return button;
});
</script>
<script src="code.js"></script>
</body>
</html>

58
docs/_style/prism-master/plugins/toolbar/prism-toolbar.css Normal file
View File

@ -0,0 +1,58 @@
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
}

137
docs/_style/prism-master/plugins/toolbar/prism-toolbar.js Normal file
View File

@ -0,0 +1,137 @@
(function(){
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
var callbacks = [];
var map = {};
var noop = function() {};
Prism.plugins.toolbar = {};
/**
* Register a button callback with the toolbar.
*
* @param {string} key
* @param {Object|Function} opts
*/
var registerButton = Prism.plugins.toolbar.registerButton = function (key, opts) {
var callback;
if (typeof opts === 'function') {
callback = opts;
} else {
callback = function (env) {
var element;
if (typeof opts.onClick === 'function') {
element = document.createElement('button');
element.type = 'button';
element.addEventListener('click', function () {
opts.onClick.call(this, env);
});
} else if (typeof opts.url === 'string') {
element = document.createElement('a');
element.href = opts.url;
} else {
element = document.createElement('span');
}
element.textContent = opts.text;
return element;
};
}
callbacks.push(map[key] = callback);
};
/**
* Post-highlight Prism hook callback.
*
* @param env
*/
var hook = Prism.plugins.toolbar.hook = function (env) {
// Check if inline or actual code block (credit to line-numbers plugin)
var pre = env.element.parentNode;
if (!pre || !/pre/i.test(pre.nodeName)) {
return;
}
// Autoloader rehighlights, so only do this once.
if (pre.parentNode.classList.contains('code-toolbar')) {
return;
}
// Create wrapper for <pre> to prevent scrolling toolbar with content
var wrapper = document.createElement("div");
wrapper.classList.add("code-toolbar");
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
// Setup the toolbar
var toolbar = document.createElement('div');
toolbar.classList.add('toolbar');
if (document.body.hasAttribute('data-toolbar-order')) {
callbacks = document.body.getAttribute('data-toolbar-order').split(',').map(function(key) {
return map[key] || noop;
});
}
callbacks.forEach(function(callback) {
var element = callback(env);
if (!element) {
return;
}
var item = document.createElement('div');
item.classList.add('toolbar-item');
item.appendChild(element);
toolbar.appendChild(item);
});
// Add our toolbar to the currently created wrapper of <pre> tag
wrapper.appendChild(toolbar);
};
registerButton('label', function(env) {
var pre = env.element.parentNode;
if (!pre || !/pre/i.test(pre.nodeName)) {
return;
}
if (!pre.hasAttribute('data-label')) {
return;
}
var element, template;
var text = pre.getAttribute('data-label');
try {
// Any normal text will blow up this selector.
template = document.querySelector('template#' + text);
} catch (e) {}
if (template) {
element = template.content;
} else {
if (pre.hasAttribute('data-url')) {
element = document.createElement('a');
element.href = pre.getAttribute('data-url');
} else {
element = document.createElement('span');
}
element.textContent = text;
}
return element;
});
/**
* Register the toolbar with Prism.
*/
Prism.hooks.add('complete', hook);
})();

1
docs/_style/prism-master/plugins/toolbar/prism-toolbar.min.js vendored Normal file
View File

@ -0,0 +1 @@
!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=[],e={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var o;o="function"==typeof a?a:function(t){var e;return"function"==typeof a.onClick?(e=document.createElement("button"),e.type="button",e.addEventListener("click",function(){a.onClick.call(this,t)})):"string"==typeof a.url?(e=document.createElement("a"),e.href=a.url):e=document.createElement("span"),e.textContent=a.text,e},t.push(e[n]=o)},o=Prism.plugins.toolbar.hook=function(a){var o=a.element.parentNode;if(o&&/pre/i.test(o.nodeName)&&!o.parentNode.classList.contains("code-toolbar")){var r=document.createElement("div");r.classList.add("code-toolbar"),o.parentNode.insertBefore(r,o),r.appendChild(o);var i=document.createElement("div");i.classList.add("toolbar"),document.body.hasAttribute("data-toolbar-order")&&(t=document.body.getAttribute("data-toolbar-order").split(",").map(function(t){return e[t]||n})),t.forEach(function(t){var e=t(a);if(e){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(e),i.appendChild(n)}}),r.appendChild(i)}};a("label",function(t){var e=t.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&e.hasAttribute("data-label")){var n,a,o=e.getAttribute("data-label");try{a=document.querySelector("template#"+o)}catch(r){}return a?n=a.content:(e.hasAttribute("data-url")?(n=document.createElement("a"),n.href=e.getAttribute("data-url")):n=document.createElement("span"),n.textContent=o),n}}),Prism.hooks.add("complete",o)}}();