Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage of remark-rehype options #445

Closed
wants to merge 2 commits into from
Closed

Usage of remark-rehype options #445

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c55c75e
Usage of remark-rehype options
gtnbssn May 5, 2022
f73d41d
How to use css with the sr-only class
gtnbssn May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/pages/en/guides/markdown-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,3 +438,50 @@ When using Prism, you'll need to add a stylesheet to your project for syntax hig
1. Loading this [into your page's `<head>`](https://docs.astro.build/en/core-concepts/astro-pages/#page-html) via a `<link>` tag.

You can also visit the [list of languages supported by Prism](https://prismjs.com/#supported-languages) for options and usage.

### Remark-rehype options and footnotes accessibility

[GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) allows you to author footnotes. For accessibility reasons, this will add an `h2` element with the word "Footnotes", as well as `aria-label`s in the back links that say "Back to content". You might want to translate this to the language of your site. The Markdown is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options), including some to translate this content.

You can use remark-rehype options in your config file like so:

```js
// astro.config.mjs
export default {
markdown: {
remarkRehype: {
footnoteLabel: 'Catatan kaki',
footnoteBackLabel: 'Kembali ke konten',
},
},
};
```

#### CSS

The created `h2` comes with a `sr-only` class. This is a widely accepted way of keeping things accessible while hiding content from visual users. You can add relevant css code to hide this class in your project, for instance:

```css
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
```

If you are using tailwind you can add it in the safelist of your config file, this will ensure the class is present in the output stylesheet, even though it does not appear in the files you are authoring:

```js
//tailwind.config.cjs
module.exports = {
//...
safelist: ['sr-only'],
//...
};
```