پیشنمایش زنده
کد HTML
<pre
class="whoami-code"
><span class="code-line"><span class="keyword">function</span> <span class="function-name">age</span><span class="punctuation">(</span><span class="param">date: Date</span><span class="punctuation">)</span> <span class="punctuation">{</span></span><span class="code-line"> <span class="keyword">return</span> <span class="keyword">new</span> Date<span class="punctuation">()</span><span class="punctuation">.</span><span class="function-name">getFullYear</span><span class="punctuation">()</span> <span class="operator">-</span> <span class="console">date</span><span class="punctuation">.</span><span class="function-name">getFullYear</span><span class="punctuation">()</span><span class="punctuation">;</span></span><span class="code-line"><span class="punctuation">}</span></span><span class="code-line"><span class="keyword">const</span> <span class="var">name</span> <span class="operator">=</span> <span class="string">"Louis"</span><span class="punctuation">;</span></span><span class="code-line"><span class="keyword">const</span> <span class="var">birthDate</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="class">Date</span><span class="punctuation">(</span><span class="string">"2003-09-23"</span><span class="punctuation">)</span><span class="punctuation">;</span></span><span class="code-line"><span class="keyword">const</span> <span class="var">languages</span> <span class="operator">=</span> <span class="punctuation">[</span><span class="string">"French"</span><span class="punctuation">,</span> <span class="string">"English"</span><span class="punctuation">]</span><span class="punctuation">;</span></span><span class="code-line"><span class="keyword">const</span> <span class="var">skills</span> <span class="operator">=</span> <span class="punctuation">[</span></span><span class="code-line"> <span class="string">"Python <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.2-45.2 8-53.4 24.7-53.4 55.4v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z" fill="currentColor"></path></svg>"</span><span class="punctuation">,</span></span><span class="code-line"> <span class="string">"JavaScript <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z" fill="currentColor"></path></svg>"</span><span class="punctuation">,</span></span><span class="code-line"><span class="punctuation">]</span><span class="punctuation">;</span></span><span class="code-line"><span class="console">console</span><span class="punctuation">.</span><span class="function-name">log</span><span class="punctuation">(</span><span class="punctuation">{</span></span><span class="code-line"> <span class="var">name</span><span class="punctuation">,</span></span><span class="code-line"> <span class="var">birthDate</span><span class="punctuation">,</span></span><span class="code-line"> <span class="var">age</span><span class="punctuation">:</span> <span class="function-name">age</span><span class="punctuation">(</span><span class="var">birthDate</span><span class="punctuation">)</span><span class="punctuation">,</span> <span class="comment">// 21</span></span><span class="code-line"> <span class="var">languages</span><span class="punctuation">,</span></span><span class="code-line"> <span class="var">skills</span><span class="punctuation">,</span></span><span class="code-line"><span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">;</span></span></pre>
کد CSS
.whoami-code {
background: #121317;
color: #e6e6e6;
font-family: "Fira Mono", "Consolas", monospace;
font-size: 1.12em;
border-radius: 14px;
padding: 2.2em 0 2.2em 4.4em;
margin: 2.5em auto;
max-width: 800px;
overflow-x: auto;
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.2),
0 1.5px 0 #191a1f inset;
border: 1.5px solid #181a20;
position: relative;
counter-reset: code-line;
line-height: 1.55;
}
.whoami-code span.code-line {
display: block;
padding: 0;
margin: 0;
position: relative;
min-height: 1.45em;
white-space: pre;
}
.whoami-code span.code-line::before {
counter-increment: code-line;
content: counter(code-line);
position: absolute;
left: -3.2em;
width: 2.4em;
text-align: right;
color: #3a3d4a;
font-size: 0.99em;
font-family: inherit;
border-right: 1.5px solid #22232a;
padding-right: 0.6em;
user-select: none;
transition: color 0.17s;
}
.whoami-code span.code-line:hover::before {
color: #7dd3fc;
}
.function-name {
color: #6ddcff;
}
.var {
color: #e2777a;
}
.string {
color: #fcd66d;
position: relative;
cursor: pointer;
transition: color 0.2s;
}
.class {
color: #6ddcff;
}
.comment {
color: #697098;
font-style: italic;
}
.param {
color: #e1e1e6;
}
.icon {
vertical-align: middle;
width: 22px;
height: 22px;
margin-left: 0.3em;
margin-right: 0.2em;
filter: drop-shadow(0 1px 3px #1116);
color: #43fe97;
background: transparent;
border-radius: 4px;
transition:
opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
color 0.18s ease;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
left: 110%;
transform: translateY(-50%) scale(0.9);
z-index: 10;
}
.string:hover .icon,
.string:focus .icon {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) scale(1.08);
color: #ffffff;
}
.string:hover,
.string:focus {
color: #f9b572;
background: rgba(36, 40, 46, 0.28);
border-radius: 6px;
transition:
background 0.2s,
color 0.2s;
}
@media (max-width: 600px) {
.whoami-code {
padding: 1.1em 0 1.1em 2.4em;
font-size: 1em;
border-radius: 8px;
margin: 1em 0.1em;
}
.icon {
width: 18px;
height: 18px;
left: 104%;
}
}
.keyword {
color: rgb(254, 67, 95);
font-weight: bold;
}
.function-name {
color: #9a8fff;
}
.var {
color: rgba(255, 255, 255, 0.9);
}
.string {
color: #43fe97;
position: relative;
cursor: pointer;
transition: color 0.2s;
}
.class {
color: #5643fe;
}
.comment {
color: #697098;
font-style: italic;
}
.param {
color: #e1e1e6;
}
.operator {
color: #fefe43;
}
.punctuation {
color: #727272;
}
.console {
color: #fe9a43;
}