facebook / facebook/docusaurus

Folding sections in code blocks

Open
#2,215 7 comments 4 reactions 0 assignees View on GitHub
difficulty: intermediate domain: theme feature
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

## 🚀 Feature

Allow irrelevant sections of code to be folded away in code samples.

## Have you read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md#reporting-new-issues)?

Yes

## Motivation

Sometimes it's nice to be able to fold away irrelevant sections in a full code example, so that you can focus on the important parts.

## Pitch

For example, if I wrote a Rust function:

```rust
fn main() {
// sample:start
println!("hello!");
// sample:end
}
```

I'd want it to display as (note the indentation):

```rust
println!("hello!");
```

There would be a button on the code block to allow this to be expanded to the full code:

```rust
fn main() {
println!("hello!");
}
```

### Example: Kotlin's documentation

For a live example, you can check out the Kotlin docs. They seem to have a nice UI for unfolding examples. For example, [here is their documentation on defining variables](https://kotlinlang.org/docs/reference/basic-syntax.html#defining-variables):

- Folded:

Screen Shot 2020-01-15 at 1 52 20 pm
- Unfolded:

Screen Shot 2020-01-15 at 1 52 28 pm
- Markdown source:

Screen Shot 2020-01-15 at 1 47 32 pm

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.