@0x1js/highlighter
Version:
1 lines • 7.71 kB
CSS
.syntax-highlighter{font-family:'Fira Code','Monaco','Menlo','Ubuntu Mono',monospace;font-size:14px;line-height:1.5;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);transition:all 0.2s ease;padding-top:10px;padding-bottom:10px;padding-left:15px}.syntax-highlighter:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.highlight-line{display:flex;align-items:center;min-height:1.5em;padding:0;position:relative}.highlight-line:hover{background-color:rgba(255,255,255,0.02)}.line-number{user-select:none;text-align:right;padding:0 16px 0 1px;min-width:3em;font-size:12px;opacity:0.6;border-right:1px solid rgba(255,255,255,0.1);margin-right:1px}.line-content{flex:1;padding:0 16px 0 0;white-space:pre;overflow-x:auto}.truncated{padding:8px 16px;font-style:italic;opacity:0.7;border-top:1px solid rgba(255,255,255,0.1);text-align:center}.syntax-highlighter::before{content:"📋";position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.6);border-radius:6px;padding:6px 8px;font-size:12px;cursor:pointer;opacity:0;transition:opacity 0.2s ease;z-index:10}.syntax-highlighter:hover::before{opacity:1}.syntax-highlighter.theme-dark{background:linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%);color:#e2e8f0;border:1px solid #334155}.theme-dark .line-number{color:#64748b;border-right-color:#334155}.theme-dark .highlight-line:hover{background-color:rgba(255,255,255,0.03)}.theme-dark .truncated{border-top-color:#334155}.theme-dark .token-keyword{color:#c084fc;font-weight:600}.theme-dark .token-string{color:#34d399}.theme-dark .token-comment{color:#6b7280;font-style:italic}.theme-dark .token-number{color:#fb7185}.theme-dark .token-operator{color:#fbbf24}.theme-dark .token-function{color:#60a5fa;font-weight:500}.theme-dark .token-variable{color:#f87171}.theme-dark .token-type{color:#a78bfa;font-weight:500}.theme-dark .token-property{color:#fcd34d}.theme-dark .token-constant{color:#fb923c;font-weight:600}.theme-dark .token-plain{color:#e2e8f0}.syntax-highlighter.theme-light{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);color:#1e293b;border:1px solid #e2e8f0}.theme-light .line-number{color:#64748b;border-right-color:#e2e8f0}.theme-light .highlight-line:hover{background-color:rgba(0,0,0,0.02)}.theme-light .truncated{border-top-color:#e2e8f0}.theme-light .token-keyword{color:#7c3aed;font-weight:600}.theme-light .token-string{color:#059669}.theme-light .token-comment{color:#6b7280;font-style:italic}.theme-light .token-number{color:#dc2626}.theme-light .token-operator{color:#d97706}.theme-light .token-function{color:#2563eb;font-weight:500}.theme-light .token-variable{color:#dc2626}.theme-light .token-type{color:#7c3aed;font-weight:500}.theme-light .token-property{color:#ca8a04}.theme-light .token-constant{color:#ea580c;font-weight:600}.theme-light .token-plain{color:#1e293b}.syntax-highlighter.theme-violet{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%);color:#e0e7ff;border:1px solid #6366f1;box-shadow:0 0 20px rgba(99,102,241,0.2)}.theme-violet .line-number{color:#a5b4fc;border-right-color:#6366f1}.theme-violet .highlight-line:hover{background-color:rgba(99,102,241,0.1)}.theme-violet .truncated{border-top-color:#6366f1}.theme-violet .token-keyword{color:#c4b5fd;font-weight:600;text-shadow:0 0 10px rgba(196,181,253,0.3)}.theme-violet .token-string{color:#6ee7b7}.theme-violet .token-comment{color:#9ca3af;font-style:italic}.theme-violet .token-number{color:#fca5a5}.theme-violet .token-operator{color:#fde047}.theme-violet .token-function{color:#93c5fd;font-weight:500;text-shadow:0 0 8px rgba(147,197,253,0.2)}.theme-violet .token-variable{color:#fb7185}.theme-violet .token-type{color:#ddd6fe;font-weight:500}.theme-violet .token-property{color:#fcd34d}.theme-violet .token-constant{color:#fdba74;font-weight:600}.theme-violet .token-plain{color:#e0e7ff}@media (max-width:768px){.syntax-highlighter{font-size:12px;border-radius:8px}.line-number{padding:0 8px 0 8px;min-width:2em;font-size:10px}.line-content{padding:0 8px 0 0}}@keyframes highlightFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.syntax-highlighter{animation:highlightFadeIn 0.3s ease-out}@media (prefers-reduced-motion:reduce){.syntax-highlighter,.syntax-highlighter:hover,.syntax-highlighter::before{transition:none;animation:none}}.syntax-highlighter:focus-within{outline:2px solid #6366f1;outline-offset:2px}@media print{.syntax-highlighter{background:white ;color:black ;border:1px solid #000 ;box-shadow:none }.syntax-highlighter::before{display:none }.syntax-highlighter *{color:black ;background:transparent }}.syntax-highlighter-wrapper{position:relative;margin:1rem 0;font-family:inherit}.syntax-highlighter-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0,0,0,0.3);border-bottom:1px solid rgba(255,255,255,0.1);font-size:14px;font-weight:500}.syntax-highlighter-title{color:#e2e8f0;font-weight:600}.syntax-highlighter-language{color:#a78bfa;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;background:rgba(167,139,250,0.1);padding:4px 8px;border-radius:4px}.copy-button{position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:8px 10px;font-size:14px;cursor:pointer;opacity:0;transition:all 0.2s ease;z-index:10;color:#e2e8f0;font-family:inherit;backdrop-filter:blur(4px)}.copy-button:hover{background:rgba(0,0,0,0.8);border-color:rgba(255,255,255,0.3);transform:scale(1.05)}.copy-button.visible{opacity:1}.copy-button.copied{background:rgba(34,197,94,0.2);border-color:rgba(34,197,94,0.5);color:#34d399}.syntax-highlighter-footer{padding:8px 16px;background:rgba(0,0,0,0.2);border-top:1px solid rgba(255,255,255,0.1);font-size:12px;color:#9ca3af;text-align:center}.inline-code{display:inline;padding:2px 6px;font-family:'Fira Code','Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875em;border-radius:4px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1)}.syntax-highlighter-wrapper .theme-light .syntax-highlighter-header{background:rgba(248,250,252,0.8);border-bottom-color:rgba(0,0,0,0.1)}.syntax-highlighter-wrapper .theme-light .syntax-highlighter-title{color:#1e293b}.syntax-highlighter-wrapper .theme-light .syntax-highlighter-footer{background:rgba(248,250,252,0.8);border-top-color:rgba(0,0,0,0.1);color:#64748b}.syntax-highlighter-wrapper .theme-light .copy-button{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.1);color:#1e293b}.syntax-highlighter-wrapper .theme-light .copy-button:hover{background:rgba(255,255,255,1);border-color:rgba(0,0,0,0.2)}.syntax-highlighter-wrapper .theme-light .inline-code{background:rgba(248,250,252,0.8);border-color:rgba(0,0,0,0.1)}.syntax-highlighter-wrapper .theme-violet .syntax-highlighter-header{background:rgba(30,27,75,0.8);border-bottom-color:rgba(99,102,241,0.3)}.syntax-highlighter-wrapper .theme-violet .syntax-highlighter-footer{background:rgba(30,27,75,0.8);border-top-color:rgba(99,102,241,0.3)}.syntax-highlighter-wrapper .theme-violet .copy-button{background:rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.4);color:#e0e7ff}.syntax-highlighter-wrapper .theme-violet .copy-button:hover{background:rgba(99,102,241,0.3);border-color:rgba(99,102,241,0.6)}@media (max-width:768px){.syntax-highlighter-header{padding:8px 12px;font-size:12px}.syntax-highlighter-language{font-size:10px;padding:2px 6px}.copy-button{top:8px;right:8px;padding:6px 8px;font-size:12px}.syntax-highlighter-footer{padding:6px 12px;font-size:11px}}