Redo markdown preview
This commit is contained in:
parent
d7c1540f23
commit
537bea1136
2 changed files with 54 additions and 19 deletions
21
src/assets/css/blocks/footnotes.css
Normal file
21
src/assets/css/blocks/footnotes.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.footnotes {
|
||||
font-size: var(--size-step-min-1);
|
||||
}
|
||||
|
||||
.footnote-ref {
|
||||
font-size: var(--size-step-min-1);
|
||||
vertical-align: super;
|
||||
margin-inline-start: var(--space-xs);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.footnote-backref {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-bg-accent);
|
||||
border-radius: var(--border-radius);
|
||||
padding-inline: var(--space-xs);
|
||||
}
|
||||
|
||||
.footnote-backref:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
|
@ -5,11 +5,13 @@ date: 2022-11-02
|
|||
tags: ['markdown', 'feature']
|
||||
---
|
||||
|
||||
A lot of markdown packages are installed to help you write your posts. You can configure them in `config/plugins/markdown.js`.
|
||||
A lot of markdown packages are installed to help you write your posts.
|
||||
You can configure them in `config/plugins/markdown.js`.
|
||||
|
||||
As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of `target: '_blank'` and `rel: 'noreferrer noopener'` for external links (all links with the pattern`/^https?:/`).
|
||||
As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (www.lenesaile.com) and the automatic addition of and `rel: 'noopener'` for external links (all links with the pattern`/^https?:/`).
|
||||
|
||||
This is a small pitfall! Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
|
||||
**This is a tiny pitfall!**
|
||||
Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
|
||||
|
||||
```
|
||||
An internal link to the [about page](/about/)
|
||||
|
|
@ -75,12 +77,16 @@ _This is italic text_
|
|||
|
||||
Syntax highlighting
|
||||
|
||||
```js
|
||||
var foo = function (bar) {
|
||||
return bar++;
|
||||
};
|
||||
```css
|
||||
.back-top-top {
|
||||
padding: 10px;
|
||||
background: white;
|
||||
margin-top: 110vh;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
console.log(foo(5));
|
||||
/* by David Darnes */
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
|
@ -93,27 +99,29 @@ console.log(foo(5));
|
|||
|
||||
## Links
|
||||
|
||||
`rel="noreferrer noopener"` and `target="_blank"` is added automatically to external links. So is an indicator icon, see global-styles.css
|
||||
[link text](http://dev.nodeca.com)
|
||||
[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
|
||||
[Read all those articles](https://moderncss.dev/)
|
||||
Autoconverted link https://every-layout.dev/ (enabled via linkify)
|
||||
|
||||
Autoconverted link https://github.com/nodeca/pica (enabled via linkify)
|
||||
## Emojis
|
||||
|
||||
### Emojis
|
||||
**Literal:**
|
||||
🤩 💯 💚 👻 👾
|
||||
|
||||
Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
|
||||
Shortcuts (emoticons): :-) :-( 8-) ;)
|
||||
**Classic markup:**
|
||||
:cry: :poop: :fire: :laughing: :christmas_tree:
|
||||
([A reference for emoji markup](https://gist.github.com/rxaviers/7360908))
|
||||
|
||||
### mark
|
||||
**Shortcuts (emoticons)**:
|
||||
:-) :-( 8-) ;)
|
||||
|
||||
## mark
|
||||
|
||||
==Marked text==
|
||||
|
||||
### Footnotes
|
||||
## Footnotes
|
||||
|
||||
Footnote 1 link[^first].
|
||||
Footnote 2 link[^second].
|
||||
Inline footnote^[Text of inline footnote] definition.
|
||||
Duplicated footnote reference[^second].
|
||||
|
||||
[^first]:
|
||||
Footnote **can have markup**
|
||||
|
|
@ -122,3 +130,9 @@ Duplicated footnote reference[^second].
|
|||
[^second]: Footnote text.
|
||||
|
||||
\*[HTML]: Hyper Text Markup Language
|
||||
|
||||
## Images
|
||||
|
||||
Consider that `src` is already prepended in the settings.
|
||||
|
||||

|
||||
|
|
|
|||
Loading…
Reference in a new issue