-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] document copy button plugin #208
Comments
Hello, I was searching on how to add a copy-to-clipboard button using rehype-pretty-code in my Astro blog. Fortunately, I stumbled upon some clues in your code: ## Available Transformers
- [`transformerCopyButton`](./src/copy-button.ts) To make it work, I've included npm i @rehype-pretty/transformers Afterward, I updated the options in my import rehypePrettyCode, { type LineElement, type Options } from 'rehype-pretty-code';
import { transformerCopyButton } from '@rehype-pretty/transformers'
// ...
const rehypePrettyCodeOptions: Options = {
theme: 'github-dark-dimmed',
onVisitLine(node: LineElement) {
// Prevent lines from collapsing in `display: grid` mode, and
// allow empty lines to be copy/pasted
if (node.children.length === 0) {
node.children = [
{
type: 'text',
value: ' ',
},
];
}
},
tokensMap: {
fn: 'entity.name.function',
},
transformers: [
transformerCopyButton({
visibility: 'always',
feedbackDuration: 3_000,
}),
]
};
// ...
export default defineConfig({
// https://docs.astro.build/en/guides/markdown-content/#markdown-plugins
markdown: {
// Disable automatic apostrophe generation: https://daringfireball.net/projects/smartypants/
smartypants: false,
syntaxHighlight: false,
remarkPlugins: [remarkToc, remarkHexo],
rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
},
// ...
}); The results look amazing! Thank you very much, |
@o-az I noticed that the "copy" button shows fine in my local deployment but it doesn't show in my live deployment although the copy button fragment is present (tested with Here is my live deployment which should show the button: https://typescript.tv/hands-on/all-you-need-to-know-about-iterators-and-generators/ UPDATE: The problem was related to |
Btw, the copy plugin seems to be broken for me. |
got a reporo? |
@bennycode glad you were able to set it up! Updated docs should be out very soon :) |
new docs are finally in a decent-enough place. Publishing soon |
No description provided.
The text was updated successfully, but these errors were encountered: