Add lang to code blocks in Markdown

[ybiquitous]

This change aims to make documents more readable and avoid syntax errors by adding a language specifier to code blocks in Markdown.

To perform this task efficiently, I use two remark plugins:

• remark-lint-code-block-syntax
• remark-lint-fenced-code-flag

--- a/package.json
+++ b/package.json
@@ -66,7 +66,9 @@
   },
   "remarkConfig": {
     "plugins": [
-      "@stylelint/remark-preset"
+      "@stylelint/remark-preset",
+      "remark-lint-code-block-syntax",
+      "remark-lint-fenced-code-flag"
     ]
   },
   "jest": {
@@ -189,6 +191,8 @@
     "postcss-import": "^12.0.1",
     "prettier": "^2.2.1",
     "remark-cli": "^9.0.0",
+    "remark-lint-code-block-syntax": "^0.2.1",
+    "remark-lint-fenced-code-flag": "^2.0.1",
     "typescript": "^4.2.4"
   },
   "engines": {

Note: I do not recommend the addition of the plugins because they produce false positives.

Which issue, if any, is this issue related to?

Closes #5272

Is there anything in the PR that needs further explanation?

Contents in some code blocks are modified to prevent syntax errors.

[ybiquitous]

Note: I do not recommend the addition of the plugins because they produce false positives.

$ npm run lint:md

> stylelint@13.13.1 lint:md
> remark . --quiet --frail

docs/developer-guide/formatters.md
   16:1-46:4  warning  Invalid JavaScript: Line 3: Unexpected token :        code-block-syntax  remark-lint
   50:1-59:4  warning  Invalid JavaScript: Line 2: Unexpected token :        code-block-syntax  remark-lint

docs/developer-guide/rules.md
  99:1-106:4  warning  Invalid JavaScript: Line 3: Illegal return statement  code-block-syntax  remark-lint

docs/user-guide/ignore-code.md
   79:1-82:4  warning  Missing code language flag                            fenced-code-flag   remark-lint

docs/user-guide/rules/about.md
   63:1-67:4  warning  Missing code language flag                            fenced-code-flag   remark-lint
   73:1-78:4  warning  Missing code language flag                            fenced-code-flag   remark-lint

lib/rules/media-feature-name-value-allowed-list/README.md
   14:1-19:4  warning  Invalid JavaScript: Line 2: Unexpected token :        code-block-syntax  remark-lint

lib/rules/media-feature-name-value-whitelist/README.md
   16:1-21:4  warning  Invalid JavaScript: Line 2: Unexpected token :        code-block-syntax  remark-lint

lib/rules/no-irregular-whitespace/README.md
   32:1-57:4  warning  Missing code language flag                            fenced-code-flag   remark-lint

⚠ 9 warnings

[mattxwang]

Just scrolled through all 93 files and each change seems reasonable to me! It's great you were able to use the plugin instead of having to do it manually, I imagine that must've been a headache 😅

Note: I do not recommend the addition of the plugins because they produce false positives.

I'm curious if this is something we should submit upstream and/or reconfigure?

[jeddy3]

Thanks for doing this.

Let's not merge it just yet as it'll conflict with #5296 and #5295. I'd prefer to get those in first, and then change this branch to merge into v14 so we keep changes that touch many files to that branch.

[ybiquitous]

@mattxwang Thank you for the review!

I'm curious if this is something we should submit upstream and/or reconfigure?

I think it hard to do it because:

• remark-lint-code-block-syntax is my work but unstable still
• remark-lint-fenced-code-flag is official but too strict about enforcing all the code blocks to have a language
  • Also, I don't like to disable via <!--lint disable ... --> comment in some documents (we have already Prettier's disable comments 😓 )

---

@jeddy3 Thank you for the feedback!

Let's not merge it just yet as it'll conflict with #5296 and #5295. I'd prefer to get those in first, and then change this branch to merge into v14 so we keep changes that touch many files to that branch.

Sorry, I forgot the conflict with the v14 branch. 😅 Your suggestion is good to me.

Of course, I can remove the conflicted files from this PR if anyone hopes:

• This PR does not include lib/rules/function-calc-no-invalid/README.md (Remove function-calc-no-invalid #5296) 🆗
• This PR includes many conflices with removed files via Remove deprecated rules #5295 like lib/rules/at-rule-blacklist/README.md

I can address both. 🙆🏼‍♂️

[jeddy3]

#5296 and #5295 are merged. We can switch this to v14 now and resolve conflicts.

[ybiquitous]

@jeddy3 Thank you. I've changed the PR base branch to v4 and set the future-major milestone to the issue #5272.

I will resolve the conflicts. 💪🏼

[ybiquitous]

I will resolve the conflicts. 💪🏼

Done.