跳转到内容

编辑维基文本/预格式化文本

来自维基教科书,开放世界中的开放书籍


预格式化文本是指保留用户原始间距和换行的文本,可能不符合典型的网页布局。这种格式通常由其来源的上下文决定,例如诗歌、散文、歌词或编程代码。

相比之下,非格式化文本依赖软件来处理文本换行行间距。例如,在维基标记中,单词之间或标点符号之后只允许一个空格,并且忽略一个换行符,需要两个换行符才能开始一个新段落。

真正的预格式化文本“保留空白”,这意味着它以完全相同的输入方式显示文本。有几种类似 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 字符代码&lt;&gt;。此技术适用于各种标签,下表显示了一些这样的转换。请注意,字面以一个和符号 (&) 开头,然后添加其他字符;最后添加一个分号。另请参见mw:Help:特殊字符。​

此外,如果你需要在页面上显示字面本身,则需要使用 <nowiki> 进行进一步的格式化。有关更多详细信息,请查看页面标记或咨询其他维基的文档。

选定 HTML 标签的字面
HTML 标签格式 字面标签格式
<pre> &lt;pre&gt;
</pre> &lt;/pre&gt;
<nowiki> &lt;nowiki&gt;
</nowiki> &lt;/nowiki&gt;

样式标签

[编辑 | 编辑源代码]

可以使用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>
|}


这样一个显示的示例就是

维基文本表格代码模块


{| style="background:lightyellow; color:black; border:1px solid gray; font-size:inherit; font-weight:normal; font-family:inherit;" cellspacing=0 cellpadding=5px align=left width=70%
  |+ 顶部标题在这里
|-
  ! style="background:brown;color:white;border-bottom:1.5px solid black"|标题 1
  ! style="background:brown;color:white;border-bottom:1.5px solid black"|标题 2
  ! style="background:brown;color:white;border-bottom:1.5px solid black"|标题 3
|-
  | width=33% style="border-bottom:1px solid gray"|A
  | width=33% style="border-bottom:1px solid gray"|B
  | width=33% style="border-bottom:1px solid gray"|C
|-
  | style="border-bottom:1px solid gray"|D
  | style="border-bottom:1px solid gray"|E
  | style="border-bottom:1px solid gray"|F
|-
  | style="border-bottom:1.5px solid black"|G
  | style="border-bottom:1.5px solid black"|H
  | style="border-bottom:1.5px solid black"|I
|}

请注意,长代码行,特别是表格的顶行和标题行,已经自动换行(无需任何 `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...
</nowiki></poem>

一个简短的 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 属性已经进行了总结。

CSS 属性摘要
Wiki 标记表格中常用的样式规则

有两个不同的样式规则集正在使用;一组与表格中特定元素相关的 HTML 属性,以及一组级联样式表集(CSS 属性),它更通用。

表格标题单元格中的每一个都可以被认为是表格更通用构建中的单独元素。在每个属性引用与同一级别同一元素的 CSS 属性相同的格式的情况下,CSS 属性优先。

为了快速参考,给出了每个样式集的简短列表,尽管这些列表并不完整。在该下拉列表的底部提供了一个链接,用于完整 CSS 属性参考。




表格的 HTML 属性;使用格式;

attribute1=value1 attribute2=value2 attributeN=valueN

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.



CSS 样式规则;使用格式;

style="property1:value1; property2:value2; propertyN:valueN;"

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

mix-blend-mode:multiply   mode                       T           blend mode

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.



维基文本的样式表达式间距规则


要避免的主要事项

  • 样式表达式中不允许换行符。让软件来处理换行。
  • 冒号或分号前面不允许空格。

以下有余地

  • 各种表格符号和单词 style 之间的空格是可以的。
  • 等号周围的空格是可以的。
  • 样式规则与其外部括号之间的空格是可以的。
  • 冒号和分号后面的空格是可以的。
  • 分号可以紧跟在最后一个样式规则之后

此外

  • 像 '2px solid black' 这样的复合值必须用空格分隔。
  • HTML 属性必须用空格与 CSS 样式表达式分隔。
  • 允许 HTML 元素行间距,但不允许 Wikitext 元素。
  • 为了清晰起见,Wikitext 和 HTML 表格元素可以缩进。
  • 代码列表中的长行只能在添加一些空格后换行。



结合两种样式规则方法

可以将属性与 CSS 样式混合使用,只要它们保持各自的本地格式。也就是说,引号之间没有等号,引号之外没有 CSS 规则。请注意,维基撇号代码和各种 HTML 标签仍然可以直接用于文本。下面显示了一个混合样式的示例。

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


内联样式的优先级。

当属性和样式在同一级别上存在冲突时,样式将优先

当一个样式表达式中存在两个类似的属性,每个属性具有不同的值时,将采用第二个值。

当同一表格行中存在两个完整的样式表达式时,将忽略第二个表达式。相同的情况适用于一行中的两个类似属性;第二个属性将被忽略。





有关属性和值的更详细描述,请参考CSS 参考列表



  1. ""pre-wrap" | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2024-09-15.
华夏公益教科书