Redo markdown preview

This commit is contained in:
madrilene 2024-02-07 12:28:35 +01:00
parent d7c1540f23
commit 537bea1136
2 changed files with 54 additions and 19 deletions

View 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);
}

View file

@ -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.
![](/assets/images/gallery/asturias-4.jpg)