EditableSketch / MDX leading indentation gets stripped in multiline code strings

Increasing Access

This would make writing and translating tutorials easier, especially for newer contributors.

Right now, some code examples in MDX files lose their indentation because Markdown intentionally ignores some leading spaces as part of the Markdown specification, and the Astro MDX integration follows that behavior. Contributors may also encounter invisible non-breaking space characters (U+00A0) in the files without realizing what they are or why they are there.

This can make code examples look broken or inconsistent, and can be confusing when editing tutorials. Better documentation or clearer formatting rules would help reduce this confusion and make tutorial contributions easier.

Most appropriate sub-area of p5.js?

Tutorials

Feature request details

Requested change

Document and standardize the convention of adding two extra leading spaces to multiline example code in .mdx tutorial files.

The goal is to keep indentation rendering consistent across tutorials and reduce confusion for contributors working with code example components such as EditableSketch and AnnotatedCode.

It would also help to:

• document this convention in contributor docs
• explain why invisible non-breaking space characters (U+00A0) may appear in older files
• clarify that the “extra two spaces” approach is the recommended formatting style for tutorial examples
• review other code-related MDX components affected by the same indentation issue so the convention can be applied consistently across all of them

Background

While working on tutorial translations for the p5.js website, I noticed that some .mdx files contain invisible non-breaking space characters (U+00A0) used as leading whitespace inside multiline code strings passed to EditableSketch.

Contributors mentioned that these invisible characters may have originally come from content authored in Google Docs. Since they visually resemble normal spaces, it can be difficult for contributors to notice or understand why they exist.

After discussion with contributors, we found that the root issue is that Markdown intentionally strips some leading spaces as part of the Markdown specification, and the Astro MDX integration follows that behavior. Because of this, some rendered tutorial examples lose their intended indentation.

We discussed several possible solutions, including custom preprocessing and parser-related approaches. I also experimented with a Vite plugin approach that temporarily replaced indentation with placeholder tokens before MDX parsing and restored them afterward.

However, the final consensus was that adding custom parser-related logic would make the project harder for contributors to understand and maintain long-term.

Instead, contributors preferred a simpler and more maintainable convention:

• add two extra leading spaces to each line in multiline example code
• allow Markdown/MDX to consume those spaces during parsing
• keep this formatting style consistent across tutorial documents
• Exmaple document with two-extra space style(Typography tutorial PR): https://github.com/processing/p5.js-website/pull/1170

Start by reviewing the contributor documentation and tutorial .mdx examples that use EditableSketch and AnnotatedCode, including the Typography tutorial example linked in the issue. Document the two-extra-spaces convention, explain possible U+00A0 characters, and review related code examples so the guidance is consistent across affected components.