chore(zh-tw): introducing new markdownlint rules

files/zh-tw/.markdownlint.jsonc

@@ -3,6 +3,7 @@
   "no-trailing-punctuation": {
     "punctuation": ".,;:。，",
   },
+  "fenced-code-language": true,
   "search-replace": {
     "rules": [
       {
@@ -101,6 +102,26 @@
         "searchPattern": "/您/g",
         "searchScope": "text",
       },
+      {
+        "name": "text-code-fence",
+        "message": "Use 'plain' tag",
+        "searchPattern": "/(^ *`{3,})(text|none|unix)/gm",
+        "replace": "$1plain",
+        "searchScope": "text",
+      },
+      {
+        "name": "gfm-alert",
+        "message": "Use the GFM syntax: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#notes_warnings_and_callouts",
+        "searchPattern": "/^ *> \\*\\*(Note|Warning|Callout):\\*\\*(?! [[{`_*])/gm",
+        "searchScope": "text",
+      },
+      {
+        "name": "bad-gfm-alert",
+        "message": "Use the correct GFM syntax: `> [!NOTE]`",
+        // TODO this should use the modifier syntax; until it has better Node support
+        "searchPattern": "/^ *> !?\\[!?((?!NOTE)[Nn][Oo][Tt][Ee]|(?!WARNING)[Ww][Aa][Rr][Nn][Ii][Nn][Gg]|(?!CALLOUT)[Cc][Aa][Ll][Ll][Oo][Uu][Tt])\\]\\n|^ *> (?!\\[!)!?\\[!?(NOTE|WARNING|CALLOUT)\\]\\n/gm",
+        "searchScope": "text",
+      },
     ],
   },
 }

files/zh-tw/learn/html/introduction_to_html/getting_started/index.md

@@ -32,7 +32,7 @@ slug: Learn/HTML/Introduction_to_HTML/Getting_started
 
 {{glossary("HTML")}}（Hypertext Markup Language）並不是一種程式語言，而是用來告訴瀏覽器該如何呈現網頁的**標記式語言**（markup language）。它可以很複雜也可以很陽春，端看網頁開發者如何構思。HTML 由一系列的元素（{{glossary("Element", "elements")}}）組成，你將利用它們來圍住、包裹，或者說標記（mark up）網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。被標籤（{{glossary("Tag", "tags")}}）包住的內容會變成超連結，或者斜體字，以及諸如此類的功能，舉例來說，請看下列內容：
 
-```
+```plain
 My cat is very grumpy
 ```
 

files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md

@@ -269,7 +269,7 @@ Now let's turn our attention to lists. Lists are everywhere in life — from you
 
 Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.
 
-```
+```plain
 milk
 eggs
 bread
@@ -434,7 +434,7 @@ textarea.onkeyup = function () {
 
 Ordered lists are lists in which the order of the items _does_ matter — let's take a set of directions as an example:
 
-```
+```plain
 Drive to the end of the road
 Turn right
 Go straight across the first two roundabouts

files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md

@@ -162,7 +162,7 @@ It is better to include such supporting information in the main article text, ra
 
 It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL:
 
-```
+```plain
 https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
 ```
 

files/zh-tw/learn/server-side/django/development_environment/index.md

@@ -298,11 +298,15 @@ pip3 install virtualenvwrapper-win
 
 現在，你可以使用`mkvirtualenv`命令創建新的虛擬環境。當此命令運行時，你將看到正在設置的環境（你看到的是略微特定 於平台的）。當命令完成時，新的虛擬環境，將處於活動狀態 - 你可以看到這一點，因為提示的開頭，將是括號中環境的名稱（如下所示）。
 
+```bash
+mkvirtualenv my_django_environment
 ```
-$ mkvirtualenv my_django_environment
 
+你應該會看到類似以下內容的輸出：
+
+```plain
 Running virtualenv with interpreter /usr/bin/python3
-...
+# …
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
 (my_django_environment) ubuntu@ubuntu:~$
 ```

files/zh-tw/learn/server-side/django/generic_views/index.md

@@ -440,7 +440,7 @@ The one interesting thing we haven't seen before is the function `book.bookinsta
 >
 > 順帶一提，若你不再基於類的 view 或 model 定義順序（order），開發伺服器會將會報錯類似的訊息：
 >
-> ```
+> ```plain
 > [29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
 > /foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
 >   allow_empty_first_page=allow_empty_first_page, **kwargs)

files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md

@@ -428,7 +428,7 @@ window.addEventListener("message", function (event) {
 
 在 Chrome 裡，這會產出這樣的結果：
 
-```
+```plain
 In content script, window.x: 1
 In content script, window.y: 2
 In page script, window.x: undefined
@@ -437,7 +437,7 @@ In page script, window.y: undefined
 
 而在 Firefox 裡會產生這些：
 
-```
+```plain
 In content script, window.x: undefined
 In content script, window.y: 2
 In page script, window.x: 1

files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md

@@ -99,7 +99,7 @@ document.body.style.border = "5px solid red";
 
 首先，仔細檢查這些檔案是否在正確的位置：
 
-```
+```plain
 borderify/
     icons/
         border-48.png

files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md

@@ -325,7 +325,7 @@ browser.runtime.onMessage.addListener(beastify);
 
 首先，請再三的確認檔案有放到相對應的資料夾中：
 
-```
+```plain
 beastify/
 
     beasts/

files/zh-tw/web/css/border-image/index.md

@@ -14,9 +14,25 @@ CSS 屬性 `border-image` 可以讓你在元素的邊框上擺上圖片。這讓
 
 ## 語法
 
-```
-none |
-  [ <圖片> [ <數字> | <百分比> ]{1,4} [/ <邊框寬度>{1,4}]? ] && [ stretch | repeat | round ]{0,2}
+```css
+/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+/* 全域值 */
+border-image: inherit;
+border-image: initial;
+border-image: revert;
+border-image: revert-layer;
+border-image: unset;
 ```
 
 ## 取值
@@ -64,18 +80,26 @@ none |
 
 \[這裡還需要一些活範例]
 
-```
-#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; }
+```css
+#header {
+  -moz-border-image: url(border.png) 27 27 27 27 round round;
+}
 
-.button  { -moz-border-image: url(button.png) 0 5 0 5; }
+.button {
+  -moz-border-image: url(button.png) 0 5 0 5;
+}
 
-.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
+.example {
+  -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px;
+}
 ```
 
-```
+```css
 /* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */
 
- div     { -moz-border-image: url(bgimage.png) 0; }
+div {
+  -moz-border-image: url(bgimage.png) 0;
+}
 ```
 
 ## 規範

files/zh-tw/web/svg/tutorial/getting_started/index.md

@@ -77,13 +77,13 @@ SVG 規範支持超大體積的 SVG 文件，以便符合一些應用程式的
 
 現在你已經大致瞭解了如何創建 SVG 文件，下一步就是將 SVG 文件上傳到服務器上。這裡有一些問題需要注意。對於一般的 SVG 文件，服務器的 HTTP 響應端是：
 
-```
+```http
 Content-Type: image/svg+xml
 ```
 
 對於經過壓縮的 SVG 文件，響應端應該是：
 
-```
+```http
 Content-Type: image/svg+xml
 Content-Encoding: gzip
 ```

files/zh-tw/web/svg/tutorial/paths/index.md

@@ -23,13 +23,13 @@ Coordinates in the `"d"` attribute are **always unitless** and hence in the user
 
 There are five line commands for `<path>` nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :
 
-```
+```plain
 M x y
 ```
 
 or
 
-```
+```plain
 m dx dy
 ```
 
@@ -50,13 +50,13 @@ In the following example we only have a point at (10,10). Note, though, that it
 
 There are three commands that draw lines. The most generic is the "Line To" command, `called with L`. `L` takes two parameters—x and y coordinates—and draws a line from the current position to a new position.
 
-```
+```plain
 L x y (or l dx dy)
 ```
 
 There are two abbreviated forms for drawing horizontal and vertical lines. `H` draws a horizontal line, and `V` draws a vertical line. Both commands only take one argument since they only move in one direction.
 
-```
+```plain
 H x (or h dx)
 V y (or v dy)
 ```
@@ -81,7 +81,7 @@ An easy place to start is by drawing a shape. We will start with a rectangle (th
 
 We can shorten the above path declaration a little bit by using the "Close Path" command, called with `Z`. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.
 
-```
+```plain
 Z (or z)
 ```
 
@@ -109,7 +109,7 @@ There are three different commands that you can use to create smooth curves. Two
 
 The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.
 
-```
+```plain
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
 ```
 
@@ -137,7 +137,7 @@ The example above creates nine Cubic Bezier curves. As the curves move toward th
 
 You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command `S` (or `s`).
 
-```
+```plain
 S x2 y2, x y (or s dx2 dy2, dx dy)
 ```
 
@@ -153,7 +153,7 @@ S x2 y2, x y (or s dx2 dy2, dx dy)
 
 The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for `q` are both relative to the previous point (that is, `dx` and `dy` are not relative to `dx1` and `dy1`).
 
-```
+```plain
 Q x1 y1, x y (or q dx1 dy1, dx dy)
 ```
 
@@ -167,7 +167,7 @@ Q x1 y1, x y (or q dx1 dy1, dx dy)
 
 As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.
 
-```
+```plain
 T x y (or t dx dy)
 ```
 
@@ -190,7 +190,7 @@ Both curves produce similar results, although the cubic allows you greater freed
 
 The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:
 
-```
+```plain
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
 ```