mirror of https://github.com/hamaluik/mkbook
fixed img figure wrapping
Kenton Hamaluik
5 years ago
parent
c6b0bdd7ad
commit
d858a51a34
@ -0,0 +1,19 @@
|
||||
---
|
||||
title = "Images"
|
||||
---
|
||||
|
||||
To include an image, use the standard markdown format:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
This will wrap the image in a `figure` with an associated `figcaption` containing the title of the image, as so:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
will render as:
|
||||
|
||||
|
||||
@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>The mkbook Book | Images</title>
|
||||
<link rel="stylesheet" href="../style.css" type="text/css" media="all" />
|
||||
<link rel="shortcut icon" href="../favicon.ico" />
|
||||
<meta property="og:title" content="The mkbook Book" />
|
||||
<meta property="og:site_name" content="The mkbook Book" />
|
||||
<meta property="og:type" content="book" />
|
||||
<meta property="og:url" content="https://hamaluik.github.io/mkbook//02-markdown/05-images.html" />
|
||||
|
||||
<meta property="book:author" content="Kenton Hamaluik" />
|
||||
<meta property="book:release_date" content="2019-12-03T17:46:22.953768196+00:00" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="big">
|
||||
<header>
|
||||
<h1><a href="../index.html">The mkbook Book</a></h1>
|
||||
<h2>by Kenton Hamaluik</h2>
|
||||
</header>
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="../01-introduction/index.html">Introduction</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="../02-markdown/index.html">Markdown</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="../02-markdown/01-commonmark.html">CommonMark</a></li>
|
||||
|
||||
<li><a href="../02-markdown/02-syntax-highlighting.html">Syntax Highlighting</a></li>
|
||||
|
||||
<li><a href="../02-markdown/03-plantuml-diagrams.html">PlantUML Diagrams</a></li>
|
||||
|
||||
<li><a href="../02-markdown/04-katex-formulas.html">KaTeX (Math) Formulas</a></li>
|
||||
|
||||
<li><a href="../02-markdown/05-images.html" class = "current">Images</a></li>
|
||||
|
||||
</ol>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="../03-frontmatter/index.html">Front Matter</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="../04-structure/index.html">Structure</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="../05-customization/index.html">Customization</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="../06-how-it-works/index.html">How it Works</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</nav>
|
||||
<nav class="small">
|
||||
<span>
|
||||
<a href="../index.html" alt="Table of Contents">
|
||||
<span class="icon">
|
||||
<svg class="icon-list-ol">
|
||||
<use xlink:href="../icons.svg#icon-list-ol">
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="../02-markdown/04-katex-formulas.html" alt="KaTeX (Math) Formulas">
|
||||
<span class="icon">
|
||||
|
||||
<svg class="icon-arrow-left">
|
||||
<use xlink:href="../icons.svg#icon-arrow-left">
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<span class="title">Images</span>
|
||||
<span>
|
||||
<span class="placeholder"></span>
|
||||
|
||||
|
||||
<a href="../03-frontmatter/index.html" alt="Front Matter">
|
||||
<span class="icon">
|
||||
<svg class="icon-arrow-right">
|
||||
<use xlink:href="../icons.svg#icon-arrow-right">
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
</nav>
|
||||
<article>
|
||||
<p>To include an image, use the standard markdown format:</p>
|
||||
<pre style="background-color:#2d2d2d;">
|
||||
<span style="color:#f99157;">
|
||||
</span></pre>
|
||||
<p>This will wrap the image in a <code>figure</code> with an associated <code>figcaption</code> containing the title of the image, as so:</p>
|
||||
<pre style="background-color:#2d2d2d;">
|
||||
<span style="color:#f99157;">![a bear](https://placebear.com/g/512/256 </span><span style="color:#d3d0c8;">"</span><span style="color:#f2777a;">A majestic bear</span><span style="color:#d3d0c8;">"</span><span style="color:#f99157;">)
|
||||
</span></pre>
|
||||
<p>will render as:</p>
|
||||
<figure><img src="https://placebear.com/g/512/256" alt="a bear" title="A majestic bear"><figcaption>A majestic bear</figcaption></figure>
|
||||
|
||||
|
||||
<div class="next-chapter">
|
||||
<a href="../03-frontmatter/index.html">
|
||||
<span>Next chapter: “Front Matter”</span>
|
||||
<span class="icon">
|
||||
<svg class="icon-arrow-right">
|
||||
<use xlink:href="../icons.svg#icon-arrow-right">
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<footer><p>© 2019 Kenton Hamaluik</p></footer>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue