CodeClip
Feedback
About
CodeClip - Create and share beautiful code snippets
Code Input
// Paste your code here or upload a file
Drag a file here or click to upload
Options
Language
Auto
Theme
VS Dark
One Light
Dracula
Material
Solarized
Nord
Preview
VS Dark
1
// Paste your code here or upload a file
Embed Code
HTML
Markdown
Image
<div style="max-width: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;"> <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 1px solid #333333;"> <div style="display: flex; justify-content: space-between; background-color: #252526; color: #CCCCCC; padding: 8px 16px; font-size: 14px; border-bottom: 1px solid #333333;"> <span></span> <span>VS Dark</span> </div> <div style="position: relative; background-color: #1E1E1E;"> <div style="display: flex;"> <div class="line-numbers" style="user-select: none; text-align: right; color: #858585; padding: 16px 12px 16px 16px; min-width: 40px; font-family: 'Fira Code', Consolas, Monaco, 'Courier New', monospace; font-size: 14px; line-height: 1.5; background-color: #1E1E1E; border-right: 1px solid #333333;"> <span>1</span> </div> <pre style="margin: 0; padding: 16px 16px 16px 16px; background-color: transparent; color: #D4D4D4; font-family: 'Fira Code', Consolas, Monaco, 'Courier New', monospace; font-size: 14px; line-height: 1.5; overflow-x: auto; flex-grow: 1;"><code class="language-text">// Paste your code here or upload a file</code></pre> </div> </div> </div> <style> /* Base theme styling */ pre code { color: #D4D4D4 !important; } .token.comment { color: #6A9955 !important; font-style: italic; } .token.string, .token.char, .token.attr-value, .token.template-string { color: #CE9178 !important; } .token.keyword, .token.builtin { color: #569CD6 !important; } .token.function { color: #DCDCAA !important; } .token.number, .token.unit { color: #B5CEA8 !important; } .token.operator { color: #D4D4D4 !important; } .token.class-name, .token.maybe-class-name { color: #4EC9B0 !important; } .token.constant, .token.symbol { color: #4FC1FF !important; } .token.punctuation { color: #D4D4D4 !important; } .token.property { color: #9CDCFE !important; } .token.tag { color: #569CD6 !important; } .token.boolean { color: #569CD6 !important; } .token.variable, .token.parameter, .token.parameter-name, .token.attr-name { color: #9CDCFE !important; } .token.console, .token.dom, .token.object { color: #9CDCFE !important; } .line-numbers span { display: block; } </style> <!-- Syntax highlighting with Prism.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-text.min.js"></script> </div>