140 lines
4.3 KiB
Markdown
140 lines
4.3 KiB
Markdown
---
|
||
layout: distill
|
||
title: a distill-style blog post
|
||
description: an example of a distill-style blog post and main elements
|
||
date: 2018-12-22
|
||
|
||
authors:
|
||
- name: Albert Einstein
|
||
url: "https://en.wikipedia.org/wiki/Albert_Einstein"
|
||
affiliations:
|
||
name: IAS, Princeton
|
||
- name: Boris Podolsky
|
||
url: "https://en.wikipedia.org/wiki/Boris_Podolsky"
|
||
affiliations:
|
||
name: IAS, Princeton
|
||
- name: Nathan Rosen
|
||
url: "https://en.wikipedia.org/wiki/Nathan_Rosen"
|
||
affiliations:
|
||
name: IAS, Princeton
|
||
|
||
bibliography: 2018-12-22-distill.bib
|
||
|
||
# Below is an example of injecting additional post-specific styles.
|
||
# If you use this post as a template, delete this _styles block.
|
||
_styles: >
|
||
.fake-img {
|
||
background: #bbb;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 12px;
|
||
}
|
||
.fake-img p {
|
||
font-family: monospace;
|
||
color: white;
|
||
text-align: left;
|
||
margin: 12px 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
---
|
||
|
||
## Equations
|
||
|
||
This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/){:target="\_blank"} engine.
|
||
You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`.
|
||
If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
|
||
|
||
To use display mode, again surround your expression with `$$` and place it as a separate paragraph.
|
||
Here is an example:
|
||
|
||
$$
|
||
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
||
$$
|
||
|
||
Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html){:target="\_blank"} that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php){:target="\_blank"}.
|
||
|
||
|
||
***
|
||
|
||
## Citations
|
||
|
||
Citations are then used in the article body with the `<d-cite>` tag.
|
||
The key attribute is a reference to the id provided in the bibliography.
|
||
The key attribute can take multiple ids, separated by commas.
|
||
|
||
The citation is presented inline like this: <d-cite key="gregor2015draw"></d-cite> (a number that displays more information on hover).
|
||
If you have an appendix, a bibliography is automatically created and populated in it.
|
||
|
||
Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover.
|
||
However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well — the authors are human and it’s nice for them to have the community associate them with their work.
|
||
|
||
***
|
||
|
||
## Footnotes
|
||
|
||
Just wrap the text you would like to show up in a footnote in a `<d-footnote>` tag.
|
||
The number of the footnote will be automatically generated.<d-footnote>This will become a hoverable footnote.</d-footnote>
|
||
|
||
***
|
||
|
||
## Code Blocks
|
||
|
||
Syntax highlighting is provided within `<d-code>` tags.
|
||
An example of inline code snippets: `<d-code language="html">let x = 10;</d-code>`.
|
||
For larger blocks of code, add a `block` attribute:
|
||
|
||
<d-code block language="javascript">
|
||
var x = 25;
|
||
function(x) {
|
||
return x * x;
|
||
}
|
||
</d-code>
|
||
|
||
***
|
||
|
||
## Layouts
|
||
|
||
The main text column is referred to as the body.
|
||
It is the assumed layout of any direct descendants of the `d-article` element.
|
||
|
||
<div class="fake-img l-body">
|
||
<p>.l-body</p>
|
||
</div>
|
||
|
||
For images you want to display a little larger, try `.l-page`:
|
||
|
||
<div class="fake-img l-page">
|
||
<p>.l-page</p>
|
||
</div>
|
||
|
||
All of these have an outset variant if you want to poke out from the body text a little bit.
|
||
For instance:
|
||
|
||
<div class="fake-img l-body-outset">
|
||
<p>.l-body-outset</p>
|
||
</div>
|
||
|
||
<div class="fake-img l-page-outset">
|
||
<p>.l-page-outset</p>
|
||
</div>
|
||
|
||
Occasionally you’ll want to use the full browser width.
|
||
For this, use `.l-screen`.
|
||
You can also inset the element a little from the edge of the browser by using the inset variant.
|
||
|
||
<div class="fake-img l-screen">
|
||
<p>.l-screen</p>
|
||
</div>
|
||
<div class="fake-img l-screen-inset">
|
||
<p>.l-screen-inset</p>
|
||
</div>
|
||
|
||
The final layout is for marginalia, asides, and footnotes.
|
||
It does not interrupt the normal flow of `.l-body` sized text except on mobile screen sizes.
|
||
|
||
<div class="fake-img l-gutter">
|
||
<p>.l-gutter</p>
|
||
</div>
|