gcanti / gcanti/docs-ts

Horizontal scrolling in rendered code blocks

Open
#33 4 comments 0 reactions 0 assignees View on GitHub
accepting PRs good first issue
Dominant language
TypeScript
Stars
105
Forks
18
PR merge metrics
No merged PRs in 30d

Description

Currently `docs-ts` [uses prettier to format](https://github.com/gcanti/docs-ts/blob/3a98908f6fd9aa2d47fe23df57bf9422b7f346d1/src/Markdown.ts#L568) markdown before writing out the docs.

The used options are:

```ts
const prettierOptions: prettier.Options = {
parser: 'markdown',
semi: false,
singleQuote: true,
printWidth: 120
}
```

The code blocks in Jekyll seem to work without horizontal scrolling only if lines don't exceed a 80 characters limit.

*Is this intended behavior?*

If not, I'd suggest one of those options:

- Configure Jekyll to use 120 characters as limit (don't know if this is possible)
- Configure Prettier to use 80 character limit

Or, and this Is what I would suggest:

- Don't format at all inside `docs-ts` and encourage the user to use [prettier-plugin-jsdoc](https://github.com/hosseinmd/prettier-plugin-jsdoc#readme). This is a much better editing experience. You have more control about the format, plus in the end the actual source file has the same formatting as the docs.

What do you think?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in src/Markdown.ts at the referenced Prettier formatting call and review the shown markdown options, especially printWidth. Compare the generated Jekyll code blocks with the reported 80-character scrolling behavior. The issue does not select an implementation or define a final acceptance condition, so the intended formatting policy must be resolved before work can be considered done.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
documentation
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.