Awesome Code Snippet Showcase | HTML, CSS, JavaScript + Highlight.js & Clipboard API

Опубликовано: 04 Ноябрь 2024
на канале: Raul Terhes

9,363

164

Learn how to build an awesome showcase for your code snippets (or text) using HTML, CSS and JavaScript. Then add a Copy to clipboard button, using the Clipboard API. Finally knit it all together by adding syntax highlighting using Highlight.js

If you wish to support me by buying me a coffee, thank you very much for the support!: https://www.buymeacoffee.com/raulterhes

📚 Resources:
📘 Code: https://github.com/raulterhesdev/copy...

📎 Highlight.js: https://highlightjs.org/
📎 Dracula Highlight.js theme: https://draculatheme.com/highlightjs
📎 Other custom CSS stylesheets for Highlight.js: https://github.com/highlightjs/highli...

📜 Blog post: https://raulterhes.com/posts/copy-cod...

🚀 Follow me:
✔️ Blog: https://raulterhes.com
✔️ Twitter: / raulbterhes
✔️ Facebook: / raulterhesdev
✔️ GitHub: https://github.com/raulterhesdev

⏱ Timestamps:
00:00 - Introduction
01:42 - HTML
05:25 - CSS
15:50 - JavaScript
18:00 - JavaScript - document.execCommand()
22:30 - JavaScript - Clipboard API
27:12 - Highlight.js
33:30 - Wrap-up