473 lines
15 KiB
HTML
473 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" class="scroll-smooth dark">
|
||
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
||
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Markdown Cheat Sheet</title>
|
||
<meta
|
||
name="description"
|
||
content="Markdown is a powerful tool for creating rich text using a plain text editor. This cheatsheet is a quick reference for Markdown syntax."
|
||
/>
|
||
<link rel="canonical" href="http://localhost:1313/posts/markdown-cheat-sheet/" />
|
||
<link rel="robots" href="/robots.txt" />
|
||
|
||
<link rel="icon" type="image/x-icon" href="/icons/favicon.ico" />
|
||
|
||
|
||
|
||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });</script>
|
||
|
||
<link rel="stylesheet" href="http://localhost:1313/css/app.css" /></head>
|
||
|
||
<body class="max-w-screen-md mx-auto px-2.5">
|
||
<div class="header">
|
||
<header class="flex flex-col sm:flex-row items-center gap-5 sm:gap-10 pt-16 py-2">
|
||
|
||
|
||
|
||
<div class="flex-none w-full h-full overflow-hidden">
|
||
<a href="http://localhost:1313/">
|
||
<img
|
||
srcset="/img/logo_hu_5a4c164ec92d2dcd.png 80w"
|
||
src="/img/logo.png"
|
||
width="232"
|
||
height="121"
|
||
alt="Deja el 10"
|
||
/>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<button class="toggle-theme" aria-label="Toggle Theme" title="Toggle Theme" onclick="toggleTheme()">
|
||
<span class="theme-icon light"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||
</svg> </span>
|
||
<span class="theme-icon dark"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||
</svg> </span>
|
||
</button>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const theme = localStorage.getItem('theme');
|
||
|
||
if (!theme || theme === 'light') {
|
||
setTheme('light');
|
||
} else {
|
||
setTheme(theme);
|
||
}
|
||
});
|
||
|
||
function setTheme(theme) {
|
||
const html = document.querySelector('html');
|
||
localStorage.setItem('theme', theme);
|
||
|
||
if (theme === 'light') {
|
||
if (html.classList.contains('dark')) {
|
||
document.querySelector('html').classList.remove('dark');
|
||
}
|
||
|
||
document.querySelector('.theme-icon.light').style.display = 'none';
|
||
document.querySelector('.theme-icon.dark').style.display = 'block';
|
||
} else {
|
||
if (!html.classList.contains('dark')) {
|
||
document.querySelector('html').classList.add('dark');
|
||
}
|
||
|
||
document.querySelector('.theme-icon.dark').style.display = 'none';
|
||
document.querySelector('.theme-icon.light').style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function toggleTheme() {
|
||
const theme = localStorage.getItem('theme');
|
||
|
||
if (theme === 'light') {
|
||
setTheme('dark');
|
||
} else {
|
||
setTheme('light');
|
||
}
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<main id="content">
|
||
|
||
<article class="flex flex-col gap-10">
|
||
<header class="flex flex-col gap-2">
|
||
<h2 class="title-large">Markdown Cheat Sheet</h2>
|
||
|
||
<div class="meta">
|
||
|
||
<time datetime="2022-08-27 09:16:45 +0000 UTC" title='Sat, Aug 27, 2022, 9:16 AM UTC'>
|
||
27/08/2022 - %!(EXTRA int=2)
|
||
</time>
|
||
|
||
|
||
—
|
||
|
||
<a class="categories" href="/categories/hello/" alt="Hello">
|
||
Hello
|
||
</a>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
<section><p>This Markdown cheat sheet <strong>provides</strong> a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic <em>syntax</em> and extended syntax.</p>
|
||
<h1 id="headings">Headings</h1>
|
||
<hr>
|
||
<h1 id="heading-1">Heading 1</h1>
|
||
<h2 id="heading-2">Heading 2</h2>
|
||
<h3 id="heading-3">Heading 3</h3>
|
||
<h4 id="heading-4">Heading 4</h4>
|
||
<h5 id="heading-5">Heading 5</h5>
|
||
<h6 id="heading-6">Heading 6</h6>
|
||
<h1 id="emphasis">Emphasis</h1>
|
||
<hr>
|
||
<p>Emphasis, aka italics, with asterisks or underscores. <strong>Strong emphasis</strong>, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. <del>Strikethrough</del> with two tildes. <strong><em>Bold and nested italic</em></strong>. <strong><em>All bold and italic</em></strong>. <strong><em><em>Bold and italic nested</em></em></strong>.</p>
|
||
<h1 id="images">Images</h1>
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
<figure class='mb-5'>
|
||
<img src="/posts/markdown-cheat-sheet/cat.jpg" alt="Cat" width="6016" height="4000" />
|
||
|
||
|
||
<figcaption
|
||
class=''
|
||
>
|
||
This is the default position of a figcaption, but it can be centered or at the end.
|
||
</figcaption>
|
||
|
||
</figure>
|
||
<h1 id="lists">Lists</h1>
|
||
<hr>
|
||
<h2 id="ordered">Ordered:</h2>
|
||
<ol>
|
||
<li>First ordered list item</li>
|
||
<li>Another item</li>
|
||
<li>Actual numbers don’t matter, just that it’s a number
|
||
<ol>
|
||
<li>1st.</li>
|
||
<li>2nd.</li>
|
||
<li>3rd.</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
<h2 id="unordered">Unordered:</h2>
|
||
<ul>
|
||
<li>This is a list item
|
||
<ul>
|
||
<li>This is a nested list item
|
||
<ul>
|
||
<li>This is a nested list item</li>
|
||
</ul>
|
||
</li>
|
||
<li>This is another list item</li>
|
||
</ul>
|
||
</li>
|
||
<li>This is another list item</li>
|
||
</ul>
|
||
<h2 id="task">Task:</h2>
|
||
<span class="task-list"></span>
|
||
|
||
<ul>
|
||
<li><input checked="" disabled="" type="checkbox"> Write the press release</li>
|
||
<li><input disabled="" type="checkbox"> Update the website</li>
|
||
<li><input disabled="" type="checkbox"> Contact the media</li>
|
||
</ul>
|
||
<h1 id="links">Links</h1>
|
||
<hr>
|
||
<p><a href="https://www.example.com">This is a link</a>.</p>
|
||
<p><a href="https://www.example.com" title="Link Title">This link</a> has a title attribute.</p>
|
||
<h1 id="tables">Tables</h1>
|
||
<hr>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Syntax</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Header</td>
|
||
<td>Title</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Paragraph</td>
|
||
<td>Text</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h1 id="blockquotes">Blockquotes</h1>
|
||
<hr>
|
||
<blockquote>
|
||
<p>Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.</p>
|
||
</blockquote>
|
||
<p>You can reference a footnote like this.</p>
|
||
<blockquote>
|
||
<p>All generalizations are false, including this one. — Mark Twain. <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
|
||
</blockquote>
|
||
<h1 id="code">Code</h1>
|
||
<hr>
|
||
<p>Inline <code>code</code> has <code>back-ticks around</code> it.</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">var</span> s <span style="color:#ff79c6">=</span> <span style="color:#f1fa8c">"JavaScript syntax highlighting"</span>;
|
||
</span></span><span style="display:flex;"><span>alert(s);
|
||
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span>s <span style="color:#ff79c6">=</span> <span style="color:#f1fa8c">"Python syntax highlighting"</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">print</span>(s)
|
||
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-plain" data-lang="plain"><span style="display:flex;"><span>No language indicated, so no syntax highlighting.
|
||
</span></span><span style="display:flex;"><span>But let's throw in a <b>tag</b>.
|
||
</span></span></code></pre></div><p>You can remove line numbers, change the highlighting theme, and more. See <a href="https://gohugo.io/content-management/syntax-highlighting/">Syntax Highlighting</a> and <a href="https://gohugo.io/getting-started/configuration-markup/#highlight/">Highlight</a>.</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-c" data-lang="c"><span style="display:flex;"><span><span style="color:#ff79c6">#include</span> <span style="color:#ff79c6"><stdio.h></span><span style="color:#ff79c6">
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#ff79c6"></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#8be9fd">int</span> <span style="color:#50fa7b">main</span>()
|
||
</span></span><span style="display:flex;"><span>{
|
||
</span></span><span style="display:flex;"><span> <span style="color:#50fa7b">printf</span>(<span style="color:#f1fa8c">"Hello, World!</span><span style="color:#f1fa8c">\n</span><span style="color:#f1fa8c">"</span>);
|
||
</span></span><span style="display:flex;"><span> <span style="color:#ff79c6">return</span> <span style="color:#bd93f9">0</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><h1 id="alerts">Alerts</h1>
|
||
<hr>
|
||
|
||
|
||
|
||
<div class="alert-box info">
|
||
|
||
<h3 class="alert-title">Optional title</h3>
|
||
|
||
<p class="flex flex-row items-center gap-2">
|
||
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor"
|
||
class="alert-icon"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
This is an info alert.
|
||
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="alert-box warning">
|
||
|
||
<h3 class="alert-title">Optional title</h3>
|
||
|
||
<p class="flex flex-row items-center gap-2">
|
||
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor"
|
||
class="alert-icon"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
This is a warning alert.
|
||
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="alert-box error">
|
||
|
||
<h3 class="alert-title">Optional title</h3>
|
||
|
||
<p class="flex flex-row items-center gap-2">
|
||
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor"
|
||
class="alert-icon"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
This is an error alert.
|
||
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="alert-box success">
|
||
|
||
<h3 class="alert-title">Optional title</h3>
|
||
|
||
<p class="flex flex-row items-center gap-2">
|
||
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor"
|
||
class="alert-icon"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
|
||
This is a success alert.
|
||
|
||
</p>
|
||
</div>
|
||
|
||
<h1 id="math">Math</h1>
|
||
<hr>
|
||
<p>You can use LaTeX-style math with <code>$</code> and <code>$$</code> delimiters. For example, <code>$x^2$</code> renders as $x^2$, and <code>$$\frac{x}{y}$$</code> renders as: $$\frac{x}{y}$$</p>
|
||
<p>We can throw this scary-looking equation at you:</p>
|
||
<p>$$
|
||
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }
|
||
$$</p>
|
||
<h1 id="horizontal-rules">Horizontal Rules</h1>
|
||
<hr>
|
||
<p>Three or more… Hyphens <code>---</code>, Asterisks <code>***</code>, or Underscores <code>___</code>.</p>
|
||
<hr>
|
||
<hr>
|
||
<hr>
|
||
<h1 id="miscellaneous">Miscellaneous</h1>
|
||
<hr>
|
||
<p>Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use <code>hover:scroll-auto</code> to only <del>The world is flat.</del>
|
||
apply the scroll-auto utility on hover.</p>
|
||
<dl>
|
||
<dt>term</dt>
|
||
<dd>definition</dd>
|
||
<dd>another definition</dd>
|
||
</dl>
|
||
<div class="footnotes" role="doc-endnotes">
|
||
<hr>
|
||
<ol>
|
||
<li id="fn:1">
|
||
<p><a href="https://www.brainyquote.com/quotes/mark_twain_137872">https://www.brainyquote.com/quotes/mark_twain_137872</a>. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer>
|
||
|
||
<div class="pb-14 taxonomy-list tags-list">
|
||
|
||
<a href="/tags/hello/" alt="Hello">
|
||
Hello
|
||
</a>
|
||
|
||
<a href="/tags/whatsapp/" alt="WhatsApp">
|
||
WhatsApp
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</footer>
|
||
</article>
|
||
|
||
|
||
</main><footer class="pt-5 pb-10 grid gap-3 sm:grid-cols-1">
|
||
<div class="text-xs font-semibold text-gray-500 order-2 sm:order-1">
|
||
🄯 2026 CMXSL — Hecho
|
||
<span class="font-normal">con</span>
|
||
<a
|
||
href="https://github.com/nixentric/Lowkey-Hugo-Theme"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Lowkey
|
||
</a>
|
||
|
||
</div>
|
||
<div class="text-xs font-semibold text-gray-500 order-2 sm:order-1">
|
||
<span class="font-normal">
|
||
El contenido de este sitio esta bajo la
|
||
</span>
|
||
<a
|
||
href="https://creativecommons.org/licenses/by-sa/4.0/deed.es"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional
|
||
</a>
|
||
</div>
|
||
|
||
<div class="order-1 sm:order-2">
|
||
<ul class="flex sm:justify-end gap-5">
|
||
|
||
|
||
<li>
|
||
<a href="https://mstdn.mx/@cmxsl" target="_blank" rel="me noopener noreferrer">Mastodon</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://media.cmxsl.org/" target="_blank" rel="me noopener noreferrer">Mediagoblin</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://git.cmxsl.org/" target="_blank" rel="me noopener noreferrer">Código fuente del sitio</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</footer>
|
||
</body>
|
||
</html>
|