編輯維基文字/預格式化文字
預格式化文字是指保留使用者原始間距和換行的文字，可能不符合典型的網頁佈局。這種格式通常由其來源的上下文決定，例如詩歌、散文、歌詞或程式設計程式碼。
相比之下，非格式化文字依賴軟體來處理文字換行和行間距。例如，在維基標記中，單詞之間或標點符號之後只允許一個空格，並且忽略一個換行符，需要兩個換行符才能開始一個新段落。
真正的預格式化文字“保留空白”，這意味著它以完全相同的輸入方式顯示文字。有幾種類似 HTML 的標籤可用於不同型別的預格式化文字，在不同程度上保留空白，每種標籤都具有獨特的特性。
 |
|
<pre> 標籤提供了顯示預格式化文字的最通用方法。要顯示的文字只需包含在這些標籤中，文字將以灰色背景和藍色虛線邊框顯示。示例原始碼
<pre> The time has come the walrus said to speak of many things... </pre>
將以這種方式顯示
The time has come the walrus said to speak of many things...
一個簡短的實驗將證實，沒有這些標籤，所有行將全部顯示為一行文字。
<Pre> 標籤摘要- 它們使用起來很簡單；因此，它們的缺點很容易被忽略。
- 格式看起來很牽強；因為它並不完全匹配任何頁面格式。
- 它使用頁面的整個寬度；即使對於一兩個單詞，除非標籤是內聯樣式。
- 巢狀一對pre 標籤將破壞佈局；內部的一對需要是字面量。見下文。
- 長行不換行；儘管這已經針對最近的瀏覽器版本進行了更正。
- 這些標籤可以用 CSS 屬性設定樣式。
- 預格式化文字標籤不能在維基或其他列表中使用。
當 <pre> 標籤內的文字塊包含它自己的 <pre> 標籤時，可能會導致顯示問題，因為瀏覽器會解釋它遇到的第一個結束標籤而不是最後一個。為了避免這種情況以及類似問題（例如，使用 <nowiki>...</nowiki> 標籤），這些標籤必須以它們的字面形式編寫，而不是它們通常的 HTML 標籤格式。
字面形式被視為文字而不是被解釋為功能標籤。要建立字面，你只需替換所有符號，即“小於”(<) 和“大於”(>) 符號，替換為它們對應的HTML 字元程式碼：< 和 >。此技術適用於各種標籤，下表顯示了一些這樣的轉換。請注意，字面以一個和符號 (&) 開頭，然後新增其他字元；最後新增一個分號。另請參見mw:Help:特殊字元。
此外，如果你需要在頁面上顯示字面本身，則需要使用 <nowiki> 進行進一步的格式化。有關更多詳細資訊，請檢視頁面標記或諮詢其他維基的文件。
| HTML 標籤格式 | 字面標籤格式 |
|---|---|
<pre>
|
<pre>
|
</pre>
|
</pre>
|
<nowiki>
|
<nowiki>
|
</nowiki>
|
</nowiki>
|
可以使用CSS 樣式來修改標籤（例如 <pre>）的外觀。要應用樣式，請在開始標籤內新增一個 CSS 表示式。這使你能夠調整文字格式的各個方面，例如大小、顏色和間距。例如，可以使用以下 CSS 將基本的 <pre> 佈局轉換為具有彩色文字的較小框
<pre style="white-space:pre-wrap; width:25%; border:1px solid lightgrey; background:ivory; color:blue;"> The time has come the walrus said, to speak of many things... </pre>
將以這種方式顯示
The time has come the walrus said, to speak of many things...
要將框居中在頁面上，請使用相同的維基文字，刪除 whitespace 屬性，放在一個表格單元格中，並將包含表格的外部表格移到居中位置。使用此方法時，width 設定應屬於外部表格。下面顯示了可居中對齊在頁面上的框的修改後的程式碼，以及結果
{| width=25% align=center
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;">
The time has come
the walrus said,
to speak of many things...
</pre>
|}
將以這種方式顯示
The time has come the walrus said, to speak of many things... |
在列出程式碼行時，某些行可能會超過頁面寬度，導致文字溢位框並向右延伸很遠，因為文字必須以輸入方式顯示。為了防止這種情況，可以使用預格式化的條件形式。透過在上面的pre 樣式表示式中新增樣式屬性 white-space: pre-wrap;，長行會自動換行，同時保留其他空白。
除了過時的IE11之外，所有網路瀏覽器都支援 white-space: pre-wrap; 屬性。[1]
要檢查你的瀏覽器是否支援預換行，請檢視它如何“列印”下面的測試框。如果你的瀏覽器正確處理 white-space: pre-wrap; 屬性，長行文字（標題後的第一行）應該在一個 400 畫素寬的框內換行。
BROWSER PRE-WRAP TEST
---------------------
If your browser can handle the pre-wrap feature, then this first sentence of un-formatted text will be wrapped in this 400 pixel-wide box, while the spacing of the remainder will be preserved.
a b c d
e f g h
i j k l
m n o p
q r s t
u v w x
y z
If your browser is not compatible, the long line of text
in the first sentence above will spill over and extend
far beyond the margins of the box, or the box will be
extended to the right margin.
|
|
|
詩歌標籤專為詩歌和散文設計，儘管它們可以適應程式碼列表。它們允許使用單個換行符來開始新行（通常需要兩個換行符才能開始新段落）。此外，可以使用空格來開始新行。
標點符號的間距規則與非格式化文字相同，並且使用撇號的維基文字格式仍然適用；三對錶示粗體，兩對錶示斜體。如果使用 HTML 標題程式碼（例如 `======`），則標題是可能的。這些標籤不會阻止維基文字以與 `<nowiki> 標籤相同的方式進行解析和執行，並且當它們的程式碼放在詩歌標籤內時，表格將保持活動狀態。
<Poem> 標籤摘要- 通常不保留空格；它像非格式化文字一樣進行解析。
- 單個硬回車將生成一個新行；這對於散文來說是必需的。
- 允許行首空格；與非格式化文字不同。
- 維基文字撇號程式碼在標籤內仍然有效；斜體、粗體等。
- HTML 標籤通常在詩歌標籤內有效；雖然維基標題無效。
- 模板和表格不會被阻止解析和執行；只要沒有 `
<nowiki>標籤，它們就會正常執行。 - 長行將自動換行；這對程式碼清單很有用。
- 這些標籤可以使用 CSS 屬性進行樣式設定；預設格式類似於頁面。
- 詩歌標籤不能在列表內使用。
要顯示散文或詩歌，或者任何受益於這些格式的文字，只需按照下面的示例編寫程式碼即可
<poem>
一、二、三、四、五，
我曾經捉到一條活魚。
六、七、八、九、十，
然後我又把它放回去了...
</poem>
結果正如預期
一、二、三、四、五，
我曾經捉到一條活魚。
六、七、八、九、十，
然後我又把它放回去了...
請注意，格式類似於用於主頁面上的格式，並且使用了單行換行符。
設定詩歌標籤的樣式
要設定 `<poem> 標籤的樣式，可以在首個標籤中放置 CSS 樣式表示式。也可以在包含的表格單元格中放置一些程式碼，以在頁面上移動塊。以下程式碼清單可以將內容著色，並將詩歌移至頁面中心。此塊的寬度會根據內容進行調整，因此某些工作在 `width` 中可能看起來不一致；對於具有獨立寬度設定的版本，請在表格行中放置一個寬度屬性並調整填充；有關這些屬性和其他屬性的列表，請參見最後一節中的 CSS 程式碼摘要。
{| cellspacing=0 align=center
|<poem style="padding:15px 15px 15px 15px; background:lightyellow;color:maroon;border:1px solid gray;">
一、二、三、四、五，
我曾經捉到一條活魚。
六、七、八、九、十，
然後我又把它放回去了...
</poem>
|}
結果是；
一、二、三、四、五， |
詩歌標籤用於程式碼
[edit | edit source]一個更復雜的示例，這次是用來說明長程式碼行自動換行的。這次，程式碼塊必須包含在 `<nowiki> 標籤中，以防止程式碼在頁面上生成表格。與上一節一樣，添加了一個表格容器來允許在頁面上對齊，並顯示了樣式的詳細資訊。這次，程式碼全部按照以下方式排列在表格行中
{| style="background:rgb(230,230,230);color:black; border:1px solid gray; font-family: fixedsys;" cellpadding=20px cellspacing=0 align=center width=80%
|
<poem>
<nowiki>
程式碼塊在這裡...
</nowiki>
</poem>
|}
這樣一個顯示的示例就是
|
請注意，長程式碼行，特別是表格的頂行和標題行，已經自動換行（無需任何 `pre-wrap` 屬性值）。
<code> 和 `<syntaxhighlight> 標籤
[edit | edit source] |
|
` 標籤在正常文字行中討論一小段原始碼時很有用。例如，“<code>the infamous <code>gets()</code> function” 呈現為 “the infamous gets() function”。
` 標籤允許顯示預格式化的程式碼模組，但此外它們還會為程式碼的各個元素新增顏色。與 `<syntaxhighlight><pre> 標籤一樣，它們保留空白，也就是說，它們以完全與鍵入時相同的格式顯示程式碼模組。
當使用行號時（預設狀態），長程式碼行將被換行，並且程式碼不會超出其容器的邊界。要檢視這些標籤的程式碼換行，請參閱下面的示例。
大多數程式語言都有顏色方案，並且首個標籤中添加了一行來指示它是什麼。有關程式碼著色和編號完整列表，請參見mw:Extension:SyntaxHighlight。自 2023 年以來，"wikitext" 可以用作 lang，它將突出顯示維基文字中的常見語法。
透過在首個標籤中寫入單詞 `line` 來新增編號。編號將應用於每一行，但起始編號不必是 1；它可以透過新增進一步的條目來預設，例如 `start=10`，從第 10 行開始。如果沒有給出行號，則使用預設值，並且行從 1 開始編號。當複製行以貼上到其他地方時，不會複製編號；只會複製文字行。
放置在 ` 標籤中的程式設計程式碼，然後從華夏公益教科書頁面複製，可以直接貼上到文字處理器中，不會損失任何質量。這對於想要編寫文件的人來說很有用。<syntaxhighlight>
tag summary:}}
*The tags ''add color'' to enclosed code blocks; many language color plans exist.
*Consecutive numbers can be added to lines automatically; the first number can be preset.
*Highlighting of blocks of consecutive lines is possible.
*When line-numbering is used, any long lines of text will wrap; there is no wrapping unless line-numbering is set.
*Plain text exists as an option; so that Wiki or other text can be numbered too.
*The tags cannot be styled; place everything in a table cell and style ''that''.
*Line numbers are not copied; only the text line is copied during copy/paste.
*''syntaxhighlight'' tags cannot be used within ''lists''.
=== HTML code colors ===
The following example shows how to color an HTML code listing and to arbitrarily start numbering from 10. Additionally, the lines could be highlighted with an entry like <code>highlight="2-3”</code>, which will highlight lines two and three. The term <code>enclose="none"</code> serves to removes the margins and whitespace.
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem><nowiki><syntaxhighlight lang="html4strict" enclose="none" line start=10 >
HTML module goes here...一個簡短的 HTML 表格編碼的典型結果是
<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;">
<caption>This is the top caption</caption>
<tr><th> Heading 1 </th><th> Heading 2 </th></tr>
<tr>
<td style="padding:10px;"> This is cell 1 text </td>
<td style="padding:10px;"> This is cell 2 text </td>
</tr>
</table>
編號散文
[edit | edit source]以下示例展示瞭如何為詩歌、散文或文字新增編號，以及如何從例如 1000 開始編號行。請注意，在Editing Wikitext/Indents and Lists § 其他有序列表 中存在另一種方法。
<syntaxhighlight lang="text" enclose="none" line start=1000 >
詩歌在這裡...（讓軟體格式化任何長行）。
</syntaxhighlight>
一個典型結果就是
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
syntaxhighlight 標籤不允許任何簡單的樣式設定，但與上一節中的示例一樣，可以使用表格作為整個列表的容器，並且可以進行樣式設定。以下是針對編號文字的這種佈局的示例
{| style="background:ivory;color:black; border:1px solid gray; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40%
| <source lang="text" enclose="none" line start=1 >
一、二、三、四、五，
我曾經捉到一條活魚。
六、七、八、九、十，
然後我又把它放回去了...
</source>
|}
在維基編輯器中執行此程式碼的結果是
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
|
因此，針對編號散文的樣式化佈局是可能的，並且格式很容易更改。可以透過以下連結找到另一種針對編號列表（例如散文）的方法：Editing Wikitext/Indents and Lists § 其他有序列表。
較舊版本的Extension:SyntaxHighlight 使用了標籤 <source>。這仍然受支援，但如果原始碼本身包含 <source> 標籤（例如 XML），則 <syntaxhighlight> 可能有助於避免衝突。
有關 CSS 樣式的完整文字，請參閱CSS 屬性參考。
CSS 表格屬性摘要
[edit | edit source]對於打算在他們的工作中使用表格的人來說，主要 CSS 屬性和 HTML 屬性已經進行了總結。
|
- ↑ ""pre-wrap" | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2024-09-15.