From 745c8b74b24ef27ee236c66a7a65a4a17781142f Mon Sep 17 00:00:00 2001 From: A1lo Date: Thu, 22 Aug 2024 09:27:05 +0800 Subject: [PATCH] chore(zh-tw): introducing new markdownlint rules (#23150) --- files/zh-tw/.markdownlint.jsonc | 21 ++++++++++ .../getting_started/index.md | 2 +- .../html_text_fundamentals/index.md | 4 +- .../images_in_html/index.md | 2 +- .../django/development_environment/index.md | 8 +++- .../server-side/django/generic_views/index.md | 2 +- .../webextensions/content_scripts/index.md | 4 +- .../your_first_webextension/index.md | 2 +- .../your_second_webextension/index.md | 2 +- files/zh-tw/web/css/border-image/index.md | 42 +++++++++++++++---- .../web/svg/tutorial/getting_started/index.md | 4 +- files/zh-tw/web/svg/tutorial/paths/index.md | 20 ++++----- 12 files changed, 81 insertions(+), 32 deletions(-) diff --git a/files/zh-tw/.markdownlint.jsonc b/files/zh-tw/.markdownlint.jsonc index d736f1f2894c42..55a7807cc219ca 100644 --- a/files/zh-tw/.markdownlint.jsonc +++ b/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", + }, ], }, } diff --git a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md index 5158fde2436ceb..b7d0f140afa7a2 100644 --- a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md +++ b/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 ``` diff --git a/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md index 8f9cf96b023a46..2076befc705512 100644 --- a/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/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 diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md index c9267d738d2de1..c0c261bb977bf6 100644 --- a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/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 ``` diff --git a/files/zh-tw/learn/server-side/django/development_environment/index.md b/files/zh-tw/learn/server-side/django/development_environment/index.md index edbd58541c31b2..2fcb873a01ebd6 100644 --- a/files/zh-tw/learn/server-side/django/development_environment/index.md +++ b/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:~$ ``` diff --git a/files/zh-tw/learn/server-side/django/generic_views/index.md b/files/zh-tw/learn/server-side/django/generic_views/index.md index 9600ff66fe3c1d..02953d4046b194 100644 --- a/files/zh-tw/learn/server-side/django/generic_views/index.md +++ b/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: , , ]> > allow_empty_first_page=allow_empty_first_page, **kwargs) diff --git a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md index 37f0c5cd393225..a4d7a33265fa7f 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/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 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md index 9682e3c139d238..fdc9b20326c6b1 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/your_first_webextension/index.md +++ b/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 diff --git a/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md index f22f8e466f4ceb..4a3aa56cc3fa6d 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/your_second_webextension/index.md @@ -325,7 +325,7 @@ browser.runtime.onMessage.addListener(beastify); 首先，請再三的確認檔案有放到相對應的資料夾中： -``` +```plain beastify/ beasts/ diff --git a/files/zh-tw/web/css/border-image/index.md b/files/zh-tw/web/css/border-image/index.md index 869cae9003a366..fd08c73eb12b65 100644 --- a/files/zh-tw/web/css/border-image/index.md +++ b/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; +} ``` ## 規範 diff --git a/files/zh-tw/web/svg/tutorial/getting_started/index.md b/files/zh-tw/web/svg/tutorial/getting_started/index.md index 63c97e5e823174..f29674014fbc13 100644 --- a/files/zh-tw/web/svg/tutorial/getting_started/index.md +++ b/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 ``` diff --git a/files/zh-tw/web/svg/tutorial/paths/index.md b/files/zh-tw/web/svg/tutorial/paths/index.md index 7b7ca07070db39..6db31a76b44d9d 100644 --- a/files/zh-tw/web/svg/tutorial/paths/index.md +++ b/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 `` 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 ```