docs: optimize code block structure #16669

chenxsan · 2022-12-16T00:31:09Z

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

A follow-up pull request as we discussed in #16636 (comment). Thanks @amareshsm for raising that issue which was introduced by my pull request.

What changes did you make? (Give an overview)

refractor syntax highlighting code to minimize changes of CSS.
Add font-variant-ligatures: none; rule to fix a UI issue under firefox reported docs: fix alignment of line number with code examples #16671 by @Tanujkanti4441
closes formatters examples appear as html-encoded text #16676

Here's a diff image (a very long one) before and after this pull request tested under firefox, so hopefully it won't break anything else other than fixing the language switcher style and number alignment issue:

And here's the page reported with broken line number before: https://deploy-preview-16669--docs-eslint.netlify.app/rules/function-paren-newline#rule-details, no regression here.

Is there anything you'd like reviewers to focus on?

netlify · 2022-12-16T00:31:13Z

✅ Deploy Preview for docs-eslint canceled.

Name	Link
🔨 Latest commit	`5747683`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/63ac404c4c1dde00097468be

chenxsan · 2022-12-16T00:46:55Z

docs/src/_plugins/md-syntax-highlighter.js

-const preWrapperPlugin = (md) => {
-    const fence = md.renderer.rules.fence;
-    md.renderer.rules.fence = (...args) => {
-        const [tokens, idx] = args;
-        const lang = tokens[idx].info.trim();
-        const rawCode = fence(...args);
-        return `<div class="language-${lang}">${rawCode}</div>`;
-    };


We don't need wrapper now, so I removed those code.

chenxsan · 2022-12-16T00:47:54Z

docs/src/_plugins/md-syntax-highlighter.js

@@ -93,15 +77,13 @@ const lineNumberPlugin = (md) => {
        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper" aria-hidden="true">${lineNumbersCode}</div>`;

        const finalCode = rawCode
-            .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
+            .replace(/<\/pre>\n/, `${lineNumbersWrapperCode}</pre>`)


markdown-it will append a \n for highlighted result https://github.com/markdown-it/markdown-it/blob/1529ff4944329eb8080a8558dab85164b6c212cd/lib/renderer.js#L59

chenxsan · 2022-12-16T00:49:06Z

docs/src/assets/scss/syntax-highlighter.scss

@@ -43,6 +43,10 @@ div[class*="language-"] {
    [data-theme="dark"] & {
        color: var(--color-neutral-100);
    }
+
+    &.line-numbers-mode {
+        padding-left: calc(1.5rem + 2.4em + 1.2rem);


Calculated according to the original implement.

harish-sethuraman · 2022-12-16T06:26:49Z

Trying to re run tests 😅 random failures

docs/src/_plugins/md-syntax-highlighter.js

harish-sethuraman

I verified for js | javascript, typescript, shell, json xml fences in no order and it seemed to work fine ✅.
Lets just make sure we don't break anything else as well😄

kecrily

LGTM

This reverts commit 0e5c31e.

amareshsm

LGTM

nzakas

LGTM. Thank you!

Everyone - if you approve a PR and don't merge it, please explain why. I see three approvals but no one merged it and I don't know if there's a reason.

amareshsm · 2022-12-28T20:25:50Z

LGTM. Thank you!

Everyone - if you approve a PR and don't merge it, please explain why. I see three approvals but no one merged it and I don't know if there's a reason.

Just waiting for the code owner review from eslint/eslint-team.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [eslint](https://eslint.org) ([source](https://github.com/eslint/eslint)) | devDependencies | minor | [`8.30.0` -> `8.31.0`](https://renovatebot.com/diffs/npm/eslint/8.30.0/8.31.0) | --- ### Release Notes <details> <summary>eslint/eslint</summary> ### [`v8.31.0`](https://github.com/eslint/eslint/releases/tag/v8.31.0) [Compare Source](eslint/eslint@v8.30.0...v8.31.0) #### Features - [`52c7c73`](eslint/eslint@52c7c73) feat: check assignment patterns in no-underscore-dangle ([#16693](eslint/eslint#16693)) (Milos Djermanovic) - [`b401cde`](eslint/eslint@b401cde) feat: add options to check destructuring in no-underscore-dangle ([#16006](eslint/eslint#16006)) (Morten Kaltoft) - [`30d0daf`](eslint/eslint@30d0daf) feat: group properties with values in parentheses in `key-spacing` ([#16677](eslint/eslint#16677)) (Francesco Trotta) #### Bug Fixes - [`35439f1`](eslint/eslint@35439f1) fix: correct syntax error in `prefer-arrow-callback` autofix ([#16722](eslint/eslint#16722)) (Francesco Trotta) - [`87b2470`](eslint/eslint@87b2470) fix: new instance of FlatESLint should load latest config file version ([#16608](eslint/eslint#16608)) (Milos Djermanovic) #### Documentation - [`4339dc4`](eslint/eslint@4339dc4) docs: Update README (GitHub Actions Bot) - [`4e4049c`](eslint/eslint@4e4049c) docs: optimize code block structure ([#16669](eslint/eslint#16669)) (Sam Chen) - [`54a7ade`](eslint/eslint@54a7ade) docs: do not escape code blocks of formatters examples ([#16719](eslint/eslint#16719)) (Sam Chen) - [`e5ecfef`](eslint/eslint@e5ecfef) docs: Add function call example for no-undefined ([#16712](eslint/eslint#16712)) (Elliot Huffman) - [`a3262f0`](eslint/eslint@a3262f0) docs: Add mastodon link ([#16638](eslint/eslint#16638)) (Amaresh S M) - [`a14ccf9`](eslint/eslint@a14ccf9) docs: clarify files property ([#16709](eslint/eslint#16709)) (Sam Chen) - [`3b29eb1`](eslint/eslint@3b29eb1) docs: fix npm link ([#16710](eslint/eslint#16710)) (Abdullah Osama) - [`a638673`](eslint/eslint@a638673) docs: fix search bar focus on `Esc` ([#16700](eslint/eslint#16700)) (Shanmughapriyan S) - [`f62b722`](eslint/eslint@f62b722) docs: country flag missing in windows ([#16698](eslint/eslint#16698)) (Shanmughapriyan S) - [`4d27ec6`](eslint/eslint@4d27ec6) docs: display zh-hans in the docs language switcher ([#16686](eslint/eslint#16686)) (Percy Ma) - [`8bda20e`](eslint/eslint@8bda20e) docs: remove manually maintained anchors ([#16685](eslint/eslint#16685)) (Percy Ma) - [`b68440f`](eslint/eslint@b68440f) docs: User Guide Getting Started expansion ([#16596](eslint/eslint#16596)) (Ben Perlmutter) #### Chores - [`65d4e24`](eslint/eslint@65d4e24) chore: Upgrade [@eslint/eslintrc](https://github.com/eslint/eslintrc)[@1](https://github.com/1).4.1 ([#16729](eslint/eslint#16729)) (Brandon Mills) - [`8d93081`](eslint/eslint@8d93081) chore: fix CI failure ([#16721](eslint/eslint#16721)) (Sam Chen) - [`8f17247`](eslint/eslint@8f17247) chore: Set up automatic updating of README ([#16717](eslint/eslint#16717)) (Nicholas C. Zakas) - [`4cd87cb`](eslint/eslint@4cd87cb) ci: bump actions/stale from 6 to 7 ([#16713](eslint/eslint#16713)) (dependabot\[bot]) - [`fd20c75`](eslint/eslint@fd20c75) chore: sort package.json scripts in alphabetical order ([#16705](eslint/eslint#16705)) (Darius Dzien) - [`10a5c78`](eslint/eslint@10a5c78) chore: update ignore patterns in `eslint.config.js` ([#16678](eslint/eslint#16678)) (Milos Djermanovic) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1697 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

docs: optimize code block structure

609a54d

eslint-github-bot bot added the triage An ESLint team member will look at this issue soon label Dec 16, 2022

eslint-github-bot bot added the documentation Relates to ESLint's documentation label Dec 16, 2022

chenxsan marked this pull request as ready for review December 16, 2022 00:46

chenxsan requested a review from a team as a code owner December 16, 2022 00:46

chenxsan commented Dec 16, 2022

View reviewed changes

harish-sethuraman closed this Dec 16, 2022

harish-sethuraman reopened this Dec 16, 2022

harish-sethuraman mentioned this pull request Dec 16, 2022

docs: fix language option styling #16636

Closed

1 task

amareshsm mentioned this pull request Dec 16, 2022

docs: fix alignment of line number with code examples #16671

Closed

1 task

docs: fix ui for firefox

fd27e89

amareshsm added accepted There is consensus among the team that this change meets the criteria for inclusion and removed triage An ESLint team member will look at this issue soon labels Dec 18, 2022

amareshsm reviewed Dec 18, 2022

View reviewed changes

docs/src/_plugins/md-syntax-highlighter.js Show resolved Hide resolved

docs: fix highlighter

57124af

harish-sethuraman approved these changes Dec 27, 2022

View reviewed changes

harish-sethuraman requested a review from a team December 27, 2022 06:30

kecrily approved these changes Dec 27, 2022

View reviewed changes

kecrily requested a review from amareshsm December 27, 2022 16:06

amareshsm mentioned this pull request Dec 27, 2022

formatters examples appear as html-encoded text #16676

Closed

chenxsan added 2 commits December 28, 2022 12:45

fix: do not escape text code

0e5c31e

Revert "fix: do not escape text code"

5747683

This reverts commit 0e5c31e.

amareshsm approved these changes Dec 28, 2022

View reviewed changes

nzakas approved these changes Dec 28, 2022

View reviewed changes

amareshsm merged commit 4e4049c into eslint:main Dec 28, 2022
21 checks passed

chenxsan deleted the docs/optimize-fence-structure branch December 29, 2022 00:30

docs: optimize code block structure #16669

docs: optimize code block structure #16669

chenxsan commented Dec 16, 2022 •

edited

netlify bot commented Dec 16, 2022 •

edited

chenxsan Dec 16, 2022 •

edited

chenxsan Dec 16, 2022

chenxsan Dec 16, 2022

harish-sethuraman commented Dec 16, 2022

harish-sethuraman left a comment

kecrily left a comment

amareshsm left a comment

nzakas left a comment

amareshsm commented Dec 28, 2022

docs: optimize code block structure #16669

docs: optimize code block structure #16669

Conversation

chenxsan commented Dec 16, 2022 • edited

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

What changes did you make? (Give an overview)

Is there anything you'd like reviewers to focus on?

netlify bot commented Dec 16, 2022 • edited

✅ Deploy Preview for docs-eslint canceled.

chenxsan Dec 16, 2022 • edited

Choose a reason for hiding this comment

chenxsan Dec 16, 2022

Choose a reason for hiding this comment

chenxsan Dec 16, 2022

Choose a reason for hiding this comment

harish-sethuraman commented Dec 16, 2022

harish-sethuraman left a comment

Choose a reason for hiding this comment

kecrily left a comment

Choose a reason for hiding this comment

amareshsm left a comment

Choose a reason for hiding this comment

nzakas left a comment

Choose a reason for hiding this comment

amareshsm commented Dec 28, 2022

chenxsan commented Dec 16, 2022 •

edited

netlify bot commented Dec 16, 2022 •

edited

chenxsan Dec 16, 2022 •

edited