Comments (1)
I made a pretty simple way to do it using some javascript and tailwindcss -
in the .eleventy.js
I add a few classes to the pre:
eleventyConfig.addPlugin(syntaxHighlight, {
preAttributes: {
class: ({ language }) => `group/code animate-fade rounded-lg bg-slate-900/80 language-${language || 'plain'}`,
},
});
Then I have a copy_code.js
file I include in all my pages:
(() => {
const code = document.querySelectorAll('pre[class*="language"]');
const buttonClasses = [
'absolute',
'right-4',
'top-4',
'border',
'rounded-md',
'p-2',
'bg-white/80',
'hover:bg-white',
'text-slate-800',
'hover:text-slate-900',
'opacity-0',
'group-hover/code:opacity-100',
'transition-opacity',
'transition-colors',
];
code.forEach((pre) => {
pre.classList.add('relative');
const button = document.createElement('button');
button.classList.add(...buttonClasses);
button.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
button.addEventListener('click', () => {
navigator.clipboard.writeText(pre.textContent);
});
pre.appendChild(button);
});
})();
Now when I hover over the code block I get a nice button:
Ps, I'm using eleventy-plugin-rollup
, you might need to tweak the js to run properly in your browser.
from eleventy-plugin-syntaxhighlight.
Related Issues (20)
- Switch from peerDependencies to 11ty.compatibility
- Added and removed lines get no special styling HOT 1
- Providing a default language for fenced code blocks HOT 8
- Add prismjs alias for `nunjucks` mapped to `jinja2` HOT 2
- Unsupported Languages cause Build Failures HOT 3
- Inline code support HOT 1
- Compatibility with markdown-it-attrs HOT 1
- Upgrade to use Torchlight? HOT 6
- Using the diff function, output is not escaped. HOT 3
- Cannot mix `diff` and `diff-lang` in one app HOT 1
- Feature request: config to add wrapping div HOT 2
- Syntax highlighting can fail if another plugin uses Prism too
- diff-javascript code block generates invalid HTML HOT 1
- Remove character wrap feature.
- Change default `lineSeparator` option to `\n` instead of `<br>` HOT 1
- possibility of adding plugins
- possibility of adding plugins
- possibility of adding Prismjs plugins to a config
- possibility of adding Prismjs plugins to a config
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-plugin-syntaxhighlight.