在维基文本中使用 HTML

Trac 支持在任何维基上下文中显示 HTML，通过使用 #!html 维基处理器。

然而，此 HTML 必须是​格式良好的。特别是，您不能在一个 #!html 块中插入一个开始标签，然后继续正常的维基文本，并在第二个 #!html 块中插入相应的结束标签。

为了创建样式化的 <div>、<span> 甚至包含任意维基文本的复杂表格，存在一个强大的替代方案：#!div、#!span 以及 #!table、#!tr、#!td 和 #!th 块。这些维基处理器是内置的，无需安装额外的软件包。

如何使用 #!html

要告知维基引擎某个文本块应被视为 HTML，请使用 html 处理器

维基标记	显示
{{{#!html <h1 style="text-align: right; color: blue">HTML Test</h1> }}}	HTML 测试

请注意，Trac 会在显示您的 HTML 代码之前对其进行净化。这意味着潜在危险的构造，例如 Javascript 事件处理程序，将从输出中移除。

过滤是由 ​Genshi 完成的，输出将是格式良好的 HTML 片段。这意味着您不能使用两个 HTML 块，一个用于打开 <div>，另一个用于关闭它，以包裹任意维基文本。

如何使用 #!div 和 #!span

维基标记

显示

{{{#!div class="important" **important** is a predefined class. }}} {{{#!div style="border: 1pt dotted; margin: 1em" **wikipage** is another predefined class that will be used when no class is specified. }}} {{{#!div class="compact" style="border: 1pt dotted; margin: 1em" **compact** is another predefined class reducing the padding within the `<div>` to a minimum. }}} {{{#!div class="wikipage compact" style="border: 1pt dotted" Classes can be combined (here **wikipage** and **compact**) which results in this case in reduced //vertical// padding but there's still some horizontal space for coping with headings. }}} {{{#!div class="" style="border: 1pt dotted; margin: 1em" Explicitly specifying no classes is //not// the same as specifying no class attribute, as this will remove the //wikipage// default class. }}}

important 是一个预定义类。 wikipage 是另一个预定义类，当未指定类时将使用此预定义类。 compact 是另一个预定义类，可将 <div> 内的内边距减至最小。 类可以组合使用（此处为 wikipage 和 compact），在这种情况下会减少垂直内边距，但仍有一些水平空间用于处理标题。 明确指定不使用任何类不等同于不指定类属性，因为这将移除 wikipage 默认类。

请注意，#!div 块的内容包含在一个或多个段落中，这些段落具有非零的上下边距。这导致了上述示例中的上下内边距。要移除内容的上下边距，请将 compact 类添加到 #!div 中。除了 wikipage 和 compact 之外，另一个预定义类是 important，可用于突出显示段落。额外的 CSS 类可以通过 site/style.css 定义。

对于 span，您应该使用宏调用语法

维基标记
Hello [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]!
显示
Hello WORLD（点击此处）!

如何使用 #!td 和其他表格相关处理器

#!td 或 #!th 处理器应分别用于创建表格数据和表格标题单元格。其他处理器 #!table 和 #!tr 对于引入表格结构不是必需的，因为 #!td 和 #!th 将自动完成此操作。|- 行分隔符可以在需要时用于开始新行，但有些人可能更喜欢为此使用 #!tr 块，因为这引入了更正式的分组，并提供了使用额外缩进级别的可能性。#!table 和 #!tr 的主要目的是提供为这些元素指定 HTML 属性（例如 style 或 valign）的可能性。

维基标记

显示

Simple 2x2 table with rich content: {{{#!th align=left - Left - Header }}} {{{#!th align=left - Right - Header }}} |---------------------------------- {{{#!td style="background: #ffd" - Left - Content }}} {{{#!td style="vertical-align: top" !RightContent }}} |---------------------------------- || ... and this can be mixed||\ ||with pipe-based cells || {{{#!td colspan=2 Pick the style the more appropriate to your content See WikiFormatting#Tables for details on the pipe-based table syntax. }}} If one needs to add some attributes to the table itself... {{{#!table style="border:none;text-align:center;margin:auto" {{{#!tr ==================================== {{{#!th style="border: none" Left header }}} {{{#!th style="border: none" Right header }}} }}} {{{#!tr ==== style="border: 1px dotted grey" {{{#!td style="border: none" 1.1 }}} {{{#!td style="border: none" 1.2 }}} }}} {{{#!tr ==================================== {{{#!td style="border: none" 2.1 }}} {{{#!td 2.2 }}} }}} }}}

带有富内容的简单 2x2 表格 左 标题 右 标题 左 内容 右侧内容 ... 并且可以混合使用 带管道的单元格 选择最适合您内容的样式 有关管道式表格语法的详细信息，请参阅 WikiFormatting#Tables。 如果需要向表格本身添加一些属性... 左侧标题 右侧标题 1.1 1.2 2.1 2.2

请注意，默认情况下，表格会被分配 "wiki" CSS 类，这使得标题单元格具有独特的样式，并为表格和单元格提供了默认边框，如本页上的表格所示。通过移除此类别（#!table class=""），您可以完全控制表格的呈现。特别是，表格、行或单元格都不会有边框，因此这是一种更有效的方法来实现这种效果，而不是必须在每个地方指定 style="border: no" 参数。

维基标记	显示
{{{#!table class="" || 0|| 1|| 2|| || 10|| 20|| 30|| || 11|| 22|| 33|| ||||||= numbers =|| }}}	0 1 2 10 20 30 11 22 33 数字

其他类可以作为替代方案指定（请记住，您可以在 site/style.css 中定义自己的类）。

维基标记	显示
{{{#!table class="listing" || 0|| 1|| 2|| || 10|| 20|| 30|| || 11|| 22|| 33|| ||||||= numbers =|| }}}	0 1 2 10 20 30 11 22 33 数字

HTML 注释

HTML 注释会从 html 处理器的输出中剥离。要向维基页面添加 HTML 注释，请使用 htmlcomment 处理器，此处理器自 Trac 0.12 起可用。

维基标记
{{{#!htmlcomment This block is translated to an HTML comment. It can contain <tags> and &entities; that will not be escaped in the output. }}}
显示
<!-- This block is translated to an HTML comment. It can contain <tags> and &entities; that will not be escaped in the output. -->

字符序列 -- 在 HTML 注释中是不允许的，否则会生成渲染错误。

更多信息

• ​https://www.w3.org/ -- 万维网联盟
• ​https://www.w3.org/MarkUp/ -- HTML 标记主页

---

另请参阅：WikiFormatting、WikiProcessors、WikiRestructuredText