Code Tomorrow Theme
Wrap inline snippets of code with<code>
. Be sure to escape HTML angle brackets.
For example,
<section>
should be wrapped as inline.<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token space"> </span><span class="token string">'Code<span class="token space"> </span>is<span class="token space"> </span>Poetry'</span><span class="token space"> </span><span class="token punctuation">)</span><span class="token punctuation">;</span>
JavaScript
Use <pre>
s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable
class, which will set a max-height of 350px and provide a y-axis scrollbar.
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token space"> </span><span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-unstyled<span class="token space"> </span>f_social_icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token space"> </span><span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token space"> </span><span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>social_facebook<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token space"> </span><span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token space"> </span><span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>social_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token space"> </span><span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token space"> </span><span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>social_vimeo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token space"> </span><span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token space"> </span><span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>social_linkedin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token lf">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
HTML
<span class="token selector"><span class="token class">.footnotes-link</span><span class="token pseudo-element">::before</span></span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">display class="token punctuation">: class="token space"> none class="token punctuation">; class="token lf">
class="token punctuation">}</span><span class="token lf">
</span><span class="token lf">
</span><span class="token selector"><span class="token class">.footnotes-link</span></span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">color class="token punctuation">: class="token space"> class="token hexcode color"> class="inline-color" style="background-color:rgba(16,179,214,1);">#10b3d6 class="token punctuation">; class="token lf">
class="token punctuation">}</span><span class="token lf">
</span><span class="token lf">
</span><span class="token selector"><span class="token class">.tip_content</span><span class="token space"> </span>p</span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">font-size class="token punctuation">: class="token space"> class="token number">14 class="token unit">px class="token punctuation">; class="token lf">
class="token punctuation">}</span><span class="token lf">
</span><span class="token lf">
</span><span class="token selector"><span class="token class">.tip_content</span><span class="token space"> </span>p<span class="token pseudo-class">:last-child</span></span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">margin-bottom class="token punctuation">: class="token space"> class="token number">0 class="token punctuation">; class="token lf">
class="token punctuation">}</span><span class="token lf">
</span><span class="token lf">
</span><span class="token selector"><span class="token class">.footnotes_item</span><span class="token space"> </span>strong</span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">position class="token punctuation">: class="token space"> relative class="token punctuation">; class="token lf">
class="token punctuation">}</span><span class="token lf">
</span><span class="token lf">
</span><span class="token selector">span<span class="token class">.top-arrow</span></span><span class="token space"> </span><span class="token punctuation">{ class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">position class="token punctuation">: class="token space"> absolute class="token punctuation">; class="token lf">
class="token space"> class="token space"> class="token space"> class="token space"> class="token property">top class="token punctuation">: class="token space"> class="token number">-3 class="token unit">px class="token punctuation">; class="token lf">
class="token punctuation">}
CSS
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".img_popup"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token space"> </span><span class="token punctuation">{</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".img_popup"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">magnificPopup</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>type<span class="token operator">:</span><span class="token space"> </span><span class="token string">'image'</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>closeOnContentClick<span class="token operator">:</span><span class="token space"> </span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>closeBtnInside<span class="token operator">:</span><span class="token space"> </span><span class="token boolean">false</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>fixedContentPos<span class="token operator">:</span><span class="token space"> </span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>removalDelay<span class="token operator">:</span><span class="token space"> </span><span class="token number">300</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>mainClass<span class="token operator">:</span><span class="token space"> </span><span class="token string">'mfp-no-margins<span class="token space"> </span>mfp-with-zoom'</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>image<span class="token operator">:</span><span class="token space"> </span><span class="token punctuation">{</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>enabled<span class="token operator">:</span><span class="token space"> </span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>navigateByImgClick<span class="token operator">:</span><span class="token space"> </span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span>preload<span class="token operator">:</span><span class="token space"> </span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token space"> </span><span class="token number">1</span><span class="token punctuation">]</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token punctuation">}</span><span class="token lf">
</span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token space"> </span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token lf">
</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
JavaScript