mirror of
https://github.com/markedjs/marked
synced 2024-11-22 00:05:53 +00:00
docs: added copy to clipboard for each code block (#2616)
Co-authored-by: Tony Brix <tony@brix.ninja>
This commit is contained in:
Danang Estutomoaji
GitHub
parent
7fa1f45456
commit
1d7f03910e
@ -80,32 +80,6 @@
|
||||
<div id="content"><!--{{content}}--></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var match = new RegExp('#/(.+)\\.md(.*)', 'g').exec(window.location.hash);
|
||||
if (match && match[1]) {
|
||||
// Redirect from URL format to new URL, for example:
|
||||
// Old: https://marked.js.org/#/USING_PRO.md#renderer
|
||||
// New: https://marked.js.org/using_pro#renderer
|
||||
var pageName = match[1].toLowerCase();
|
||||
var sectionName = match[2];
|
||||
window.location.href = '/' + pageName + sectionName;
|
||||
}
|
||||
|
||||
var navLinks = document.querySelectorAll('nav a');
|
||||
|
||||
function hashChange() {
|
||||
var fullUrl = window.location.href;
|
||||
navLinks.forEach(function(link) {
|
||||
link.className = link.href === fullUrl ? 'selected' : '';
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', function (e) {
|
||||
e.preventDefault();
|
||||
hashChange();
|
||||
});
|
||||
|
||||
hashChange();
|
||||
</script>
|
||||
<script src="/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -94,6 +94,7 @@ pre {
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
@ -104,4 +105,97 @@ code:not([class]) {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
|
||||
.github-corner:hover .octo-arm {
|
||||
animation:octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%,100%{transform:rotate(0)}
|
||||
20%,60%{transform:rotate(-25deg)}
|
||||
40%,80%{transform:rotate(10deg)}
|
||||
}
|
||||
|
||||
@media (max-width:500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation:none
|
||||
}
|
||||
|
||||
.github-corner .octo-arm {
|
||||
animation:octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.div-copy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.div-copy .icon-copy {
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.div-copy.active .icon-copy {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.div-copy .tooltip-copy {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div-copy .tooltip-copy::before {
|
||||
content: "Copied";
|
||||
position: absolute;
|
||||
|
||||
/* vertically center */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
/* move to right */
|
||||
right: 100%;
|
||||
margin-right: 5px; /* and add a small left margin */
|
||||
|
||||
/* basic styles */
|
||||
padding: 2px 7px;
|
||||
border-radius: 5px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
opacity: 0; /* hide by default */
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.div-copy.click .tooltip-copy::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.div-copy .tooltip-copy::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
/* position tooltip correctly */
|
||||
right: 100%;
|
||||
margin-right: -5px;
|
||||
|
||||
/* vertically center */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
/* the arrow */
|
||||
border-style: solid;
|
||||
border-width: 2px 2px 5px 8px;
|
||||
border-color: transparent transparent transparent #444;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.div-copy.click .tooltip-copy::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60
docs/img/copy-icon.svg
Normal file
60
docs/img/copy-icon.svg
Normal file
@ -0,0 +1,60 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||
<g id="Text-files">
|
||||
<path d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228
|
||||
C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999
|
||||
c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64
|
||||
h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002
|
||||
C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228
|
||||
c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999
|
||||
c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z
|
||||
M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699
|
||||
c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946
|
||||
c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999
|
||||
h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"/>
|
||||
<path d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005
|
||||
c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997
|
||||
C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"/>
|
||||
<path d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986
|
||||
c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016
|
||||
C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"/>
|
||||
<path d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
|
||||
s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997
|
||||
S39.16465,29.4603004,38.6031494,29.4603004z"/>
|
||||
<path d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
|
||||
s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997
|
||||
S29.0059509,37.5872993,28.4444485,37.5872993z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
55
docs/js/index.js
Normal file
55
docs/js/index.js
Normal file
@ -0,0 +1,55 @@
|
||||
|
||||
var match = /#\/(.+)\\.md(.*)/g.exec(window.location.hash);
|
||||
if (match && match[1]) {
|
||||
// Redirect from URL format to new URL, for example:
|
||||
// Old: https://marked.js.org/#/USING_PRO.md#renderer
|
||||
// New: https://marked.js.org/using_pro#renderer
|
||||
var pageName = match[1].toLowerCase();
|
||||
var sectionName = match[2];
|
||||
window.location.href = '/' + pageName + sectionName;
|
||||
}
|
||||
|
||||
var navLinks = document.querySelectorAll('nav a');
|
||||
|
||||
function hashChange() {
|
||||
var fullUrl = window.location.href;
|
||||
navLinks.forEach(function(link) {
|
||||
link.className = link.href === fullUrl ? 'selected' : '';
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', function(e) {
|
||||
e.preventDefault();
|
||||
hashChange();
|
||||
});
|
||||
|
||||
hashChange();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = '<div class="tooltip-copy"><img src="/img/copy-icon.svg" class="icon-copy" title="Click to Copy" /></div>';
|
||||
div.className = 'div-copy';
|
||||
|
||||
var allPres = document.querySelectorAll('pre');
|
||||
allPres.forEach(function(pre) {
|
||||
var timeout = null;
|
||||
var copy = div.cloneNode(true);
|
||||
pre.appendChild(copy);
|
||||
pre.onmouseover = function() {
|
||||
copy.classList.add('active');
|
||||
};
|
||||
pre.onmouseleave = function() {
|
||||
clearTimeout(timeout);
|
||||
copy.classList.remove('active');
|
||||
copy.classList.remove('click');
|
||||
};
|
||||
copy.onclick = function() {
|
||||
navigator.clipboard.writeText(pre.textContent);
|
||||
copy.classList.add('click');
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(function() {
|
||||
copy.classList.remove('click');
|
||||
}, 3000);
|
||||
};
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user