Clipboard - Clipboard Lite - Clipboard Code
Easily allow your visitors to copy selective snippets of text or code from your web pages.
Use the built-in markdown container, styled text container, or drop in your own stack. The copy-to-clipboard button can be fully customized and positioned inside or outside the text container. When positioned inside, the text wraps around the button.
The Clipboard Lite Stack is great for when you want your site visitors to be able to copy from lists, but can also be used for long pieces of text or markdown. See the examples below for how items are displayed on the page.
The Clipboard Code Stack combines the copy-to-clipboard functionality with a code highlighter. Powered by highlight.js, it comes with 89 themes and 190 code languages built in, but to keep it lightweight, the stack only loads what is required.
Move your mouse over these markdown containers to see the hover effects →
Translatable tooltip texts make this stack great in any language.
Text wraps around Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
Although these examples are mostly single word items, each block could easily contain multiple paragraphs. Another great feature is that you can set custom text to copy to the clipboard instead of the user copying the text that is displayed.
In this example, each country is wrapped in it's own DIV container, and the text that is copied is the link to that countires Wikipedia page.
In this example, the list is displayed inline. Dividers are optional and the space between items is adjustable.
| Australia | Belgium | Canada | Denmark |
| Egypt | France | Germany | Holland |
| Iceland | Japan | Kenya | Lithuania |
| Mexico | Norway | Oman | Paraguay |
| Qatar | Russia | Spain | Turkey |
Each stack comes with an optional toolbar that displays the code language. Without the toolbar, a copy-to-clipboard button appears when the users mouse is over the codeblock.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}a = 5;
b = 6;
c = a + b;
console.log(c);
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;<?php
$t = date("H");
if ($t < "10") {
echo "Have a good morning!";
} elseif ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>Will this stack work on my site? The Clipboard Suite of Stacks should work on any stacks page, regardless of framework or theme. If you come across any issues, let us know.
While editing my page, I only see dark mode colors
RapidWeaver detects that your prefered color scheme is dark mode. Turn off dark mode in the stack settings.
What is "escaped code"?
If you type regular HTML code into a codebox, browsers will try to render the code instead of displaying it. To get around this, certain characters must be replaced with escape codes. There are lots of online tools availble to do this for you such as freeformatter.com.
How can I submit a feature request?
Fill in the form on the support page and tell us your idea. We can't promise that all feature requests will be incorporated but we'll review each one.
RapidWeaver 7+
Stacks 3.5+
Compatible with all major browsers
Safari
Chrome
Firefox
Edge
Opera
Version: 1.0.0
