`--` syntax wrapped with Prettier proseWrap option
karlhorky opened this issue · comments
The --
syntax for adding front matter to each slide is made invalid by the Prettier Prose Wrap option, when it is set to 'never'
or 'always'
:
prettier.config.mjs
/** @type {import('prettier').Config} */
const prettierConfig = {
proseWrap: 'always', // 💥 destroys in-slide front matter
singleQuote: true,
};
export default prettierConfig;
Before
import sights from './sights.tsx';
export { Components } from './Components.tsx';
export { Themes } from './Themes.tsx';
--
image: tokyo.jpg
--
# Welcome to ReMDXx
---
# Slide 2
After
import sights from './sights.tsx';
export { Components } from './Components.tsx';
export { Themes } from './Themes.tsx';
-- image: tokyo.jpg --
# Welcome to ReMDXx
---
# Slide 2
Kapture.2024-02-10.at.15.12.58.mp4
This causes the slide front matter to become visible text in the slide:
Workaround
Add a new Prettier config file in the slide deck directory without a proseWrap
option:
slides/prettier.config.mjs
/** @type {import('prettier').Config} */
const prettierConfig = {
singleQuote: true,
};
export default prettierConfig;
This is not really a ReMDX concern since it pertains to how prettier formats Markdown. The template doesn't ship with prettier at this time, so unless we add it to the template it doesn't really make sense to ship a default prettier config.
I actually have to admit I didn't know this was configurable. I ran into this a few times while making slide decks. My recommendation is to always leave an empty newline before and after config entries.
Workaround 2
always leave an empty newline before and after config entries
Ah great! So this is another workaround - adding empty lines after the opening --
and before the closing --
:
import sights from './sights.tsx';
export { Components } from './Components.tsx';
export { Themes } from './Themes.tsx';
--
+
image: tokyo.jpg
+
--
# Welcome to ReMDXx
---
# Slide 2
Also opened a PR to switch the template to also use these newlines: