{"html":"function age(date: Date) { return new Date().getFullYear() - date.getFullYear();}const name = \"Louis\";const birthDate = new Date(\"2003-09-23\");const languages = [\"French\", \"English\"];const skills = [ \"Python \", \"JavaScript \",];console.log({ name, birthDate, age: age(birthDate), // 21 languages, skills,});\n","css":".whoami-code {\n background: #121317;\n color: #e6e6e6;\n font-family: \"Fira Mono\", \"Consolas\", monospace;\n font-size: 1.12em;\n border-radius: 14px;\n padding: 2.2em 0 2.2em 4.4em;\n margin: 2.5em auto;\n max-width: 800px;\n overflow-x: auto;\n box-shadow:\n 0 6px 28px rgba(0, 0, 0, 0.2),\n 0 1.5px 0 #191a1f inset;\n border: 1.5px solid #181a20;\n position: relative;\n counter-reset: code-line;\n line-height: 1.55;\n}\n\n.whoami-code span.code-line {\n display: block;\n padding: 0;\n margin: 0;\n position: relative;\n min-height: 1.45em;\n white-space: pre;\n}\n\n.whoami-code span.code-line::before {\n counter-increment: code-line;\n content: counter(code-line);\n position: absolute;\n left: -3.2em;\n width: 2.4em;\n text-align: right;\n color: #3a3d4a;\n font-size: 0.99em;\n font-family: inherit;\n border-right: 1.5px solid #22232a;\n padding-right: 0.6em;\n user-select: none;\n transition: color 0.17s;\n}\n\n.whoami-code span.code-line:hover::before {\n color: #7dd3fc;\n}\n\n.function-name {\n color: #6ddcff;\n}\n.var {\n color: #e2777a;\n}\n.string {\n color: #fcd66d;\n position: relative;\n cursor: pointer;\n transition: color 0.2s;\n}\n.class {\n color: #6ddcff;\n}\n.comment {\n color: #697098;\n font-style: italic;\n}\n.param {\n color: #e1e1e6;\n}\n\n.icon {\n vertical-align: middle;\n width: 22px;\n height: 22px;\n margin-left: 0.3em;\n margin-right: 0.2em;\n filter: drop-shadow(0 1px 3px #1116);\n color: #43fe97;\n background: transparent;\n border-radius: 4px;\n transition:\n opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.18s ease;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 110%;\n transform: translateY(-50%) scale(0.9);\n z-index: 10;\n}\n\n.string:hover .icon,\n.string:focus .icon {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(-50%) scale(1.08);\n color: #ffffff;\n}\n\n.string:hover,\n.string:focus {\n color: #f9b572;\n background: rgba(36, 40, 46, 0.28);\n border-radius: 6px;\n transition:\n background 0.2s,\n color 0.2s;\n}\n\n@media (max-width: 600px) {\n .whoami-code {\n padding: 1.1em 0 1.1em 2.4em;\n font-size: 1em;\n border-radius: 8px;\n margin: 1em 0.1em;\n }\n .icon {\n width: 18px;\n height: 18px;\n left: 104%;\n }\n}\n.keyword {\n color: rgb(254, 67, 95);\n font-weight: bold;\n}\n.function-name {\n color: #9a8fff;\n}\n.var {\n color: rgba(255, 255, 255, 0.9);\n}\n.string {\n color: #43fe97;\n position: relative;\n cursor: pointer;\n transition: color 0.2s;\n}\n.class {\n color: #5643fe;\n}\n.comment {\n color: #697098;\n font-style: italic;\n}\n.param {\n color: #e1e1e6;\n}\n.operator {\n color: #fefe43;\n}\n.punctuation {\n color: #727272;\n}\n.console {\n color: #fe9a43;\n}\n"}

tough-grasshopper-46

👁 实时预览

📝 源代码