Wix dont support code snippets with sintax highlight, thats very bad. So, a workaround is use prism.js with HTML Snippets.
Last active
September 8, 2021 19:32
-
-
Save GiuseppeMP/feee11f322913db45600200771bac6a7 to your computer and use it in GitHub Desktop.
Wix - Code Snippets with Prismjs + Dracule Theme + Copy Button (jsx, java, Python, sql, ts, js, jsx)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-css"> | |
| # Your code here! | |
| p { color: red } | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-python.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-java"> | |
| // Your code here! | |
| public static void fileCopy( File in, File out ) | |
| throws IOException | |
| { | |
| FileChannel inChannel = new FileInputStream( in ).getChannel(); | |
| FileChannel outChannel = new FileOutputStream( out ).getChannel(); | |
| try | |
| { | |
| // inChannel.transferTo(0, inChannel.size(), outChannel); // original -- apparently has trouble copying large files on Windows | |
| // magic number for Windows, 64Mb - 32Kb) | |
| int maxCount = (64 * 1024 * 1024) - (32 * 1024); | |
| long size = inChannel.size(); | |
| long position = 0; | |
| while ( position < size ) | |
| { | |
| position += inChannel.transferTo( position, maxCount, outChannel ); | |
| } | |
| } | |
| finally | |
| { | |
| if ( inChannel != null ) | |
| { | |
| inChannel.close(); | |
| } | |
| if ( outChannel != null ) | |
| { | |
| outChannel.close(); | |
| } | |
| } | |
| } | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-java.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers" data-label="prism-rocks.js" data-prismjs-copy="Copy!"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-javascript"> | |
| console.log("prism rocks!") | |
| let greeter = new Greeter("world"); | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, toolbar plugin, copy to clipboard, and javascript syntax highlight --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://prismjs.com/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-javascript.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-jsx" data-label="prism-rocks.tsx" data-prismjs-copy="Copy!"> | |
| import React, { Component } from 'react' | |
| export class FileName extends Component { | |
| render() { | |
| return <div>$2</div> | |
| } | |
| } | |
| export default $1 | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://prismjs.com/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-jsx.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| if (typeof Prism === 'undefined' || typeof document === 'undefined') { | |
| return; | |
| } | |
| if (!Prism.plugins.toolbar) { | |
| console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.'); | |
| return; | |
| } | |
| /** | |
| * When the given elements is clicked by the user, the given text will be copied to clipboard. | |
| * | |
| * @param {HTMLElement} element | |
| * @param {CopyInfo} copyInfo | |
| * | |
| * @typedef CopyInfo | |
| * @property {() => string} getText | |
| * @property {() => void} success | |
| * @property {(reason: unknown) => void} error | |
| */ | |
| function registerClipboard(element, copyInfo) { | |
| element.addEventListener('click', function () { | |
| copyTextToClipboard(copyInfo); | |
| }); | |
| } | |
| // https://stackoverflow.com/a/30810322/7595472 | |
| /** @param {CopyInfo} copyInfo */ | |
| function fallbackCopyTextToClipboard(copyInfo) { | |
| var textArea = document.createElement('textarea'); | |
| textArea.value = copyInfo.getText(); | |
| // Avoid scrolling to bottom | |
| textArea.style.top = '0'; | |
| textArea.style.left = '0'; | |
| textArea.style.position = 'fixed'; | |
| document.body.appendChild(textArea); | |
| textArea.focus(); | |
| textArea.select(); | |
| try { | |
| var successful = document.execCommand('copy'); | |
| setTimeout(function () { | |
| if (successful) { | |
| copyInfo.success(); | |
| } else { | |
| copyInfo.error(); | |
| } | |
| }, 1); | |
| } catch (err) { | |
| setTimeout(function () { | |
| copyInfo.error(err); | |
| }, 1); | |
| } | |
| document.body.removeChild(textArea); | |
| } | |
| /** @param {CopyInfo} copyInfo */ | |
| function copyTextToClipboard(copyInfo) { | |
| if (navigator.clipboard) { | |
| navigator.clipboard.writeText(copyInfo.getText()).then(copyInfo.success, function () { | |
| // try the fallback in case `writeText` didn't work | |
| fallbackCopyTextToClipboard(copyInfo); | |
| }); | |
| } else { | |
| fallbackCopyTextToClipboard(copyInfo); | |
| } | |
| } | |
| /** | |
| * Selects the text content of the given element. | |
| * | |
| * @param {Element} element | |
| */ | |
| function selectElementText(element) { | |
| // https://stackoverflow.com/a/20079910/7595472 | |
| window.getSelection().selectAllChildren(element); | |
| } | |
| /** | |
| * Traverses up the DOM tree to find data attributes that override the default plugin settings. | |
| * | |
| * @param {Element} startElement An element to start from. | |
| * @returns {Settings} The plugin settings. | |
| * @typedef {Record<"copy" | "copy-error" | "copy-success" | "copy-timeout", string | number>} Settings | |
| */ | |
| function getSettings(startElement) { | |
| /** @type {Settings} */ | |
| var settings = { | |
| 'copy': 'Copy', | |
| 'copy-error': 'Press Ctrl+C to copy', | |
| 'copy-success': 'Copied!', | |
| 'copy-timeout': 5000 | |
| }; | |
| var prefix = 'data-prismjs-'; | |
| for (var key in settings) { | |
| var attr = prefix + key; | |
| var element = startElement; | |
| while (element && !element.hasAttribute(attr)) { | |
| element = element.parentElement; | |
| } | |
| if (element) { | |
| settings[key] = element.getAttribute(attr); | |
| } | |
| } | |
| return settings; | |
| } | |
| Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) { | |
| var element = env.element; | |
| var settings = getSettings(element); | |
| var linkCopy = document.createElement('button'); | |
| linkCopy.className = 'copy-to-clipboard-button'; | |
| linkCopy.setAttribute('type', 'button'); | |
| var linkSpan = document.createElement('span'); | |
| linkCopy.appendChild(linkSpan); | |
| setState('copy'); | |
| registerClipboard(linkCopy, { | |
| getText: function () { | |
| return element.textContent; | |
| }, | |
| success: function () { | |
| setState('copy-success'); | |
| resetText(); | |
| }, | |
| error: function () { | |
| setState('copy-error'); | |
| setTimeout(function () { | |
| selectElementText(element); | |
| }, 1); | |
| resetText(); | |
| } | |
| }); | |
| return linkCopy; | |
| function resetText() { | |
| setTimeout(function () { setState('copy'); }, settings['copy-timeout']); | |
| } | |
| /** @param {"copy" | "copy-error" | "copy-success"} state */ | |
| function setState(state) { | |
| linkSpan.textContent = settings[state]; | |
| linkCopy.setAttribute('data-copy-state', state); | |
| } | |
| }); | |
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-python"> | |
| # Your code here! | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-python.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-sql" data-label="prism-rocks.ts" data-prismjs-copy="Copy!"> | |
| SELECT * FROM DUAL | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://prismjs.com/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-sql.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <meta http-equiv='X-UA-Compatible'> | |
| <!-- CSS style sheets for Prism.js --> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" media='screen' href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" /> | |
| </head> | |
| <body> | |
| <!-- Code snippet content --> | |
| <pre class="line-numbers"> | |
| <style> | |
| code { | |
| font-size: 0.8rem !important; | |
| } | |
| pre[class*=language-] { | |
| border-radius: 0.1em !important; | |
| } | |
| </style> | |
| <code style="font-family: Monaco, sans-serif" class="language-ts" data-label="prism-rocks.ts" data-prismjs-copy="Copy!"> | |
| class Greeter { | |
| greeting: string; | |
| constructor(message: string) { | |
| this.greeting = message; | |
| } | |
| greet() { | |
| return "Hello, " + this.greeting; | |
| } | |
| } | |
| let greeter = new Greeter("world"); | |
| </code> | |
| </pre> | |
| <!-- Javascript for Prism.js core, line number display, and python syntax highlight --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.js"></script> | |
| <script src="https://prismjs.com/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-typescript.min.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment