代码之家 › 专栏 › 技术社区 › Yangshun Tay

如何在不换行的表中使用标记?[副本]

docusaurus markdown css html

Yangshun Tay · 技术社区 · 6 年前

在我的Docusaurus页面上,我有这样的标记,可以呈现以下屏幕截图:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><code>organizationName</code></td>
    <td>The GitHub user or organization that owns the repository. In the case of Docusaurus, that would be the "facebook" GitHub organization.</td>
  </tr>
  <tr>
    <td><code>projectName</code></td>
    <td>The name of the GitHub repository for your project. For example, Docusaurus is hosted at https://github.com/facebook/docusaurus, so our project name in this case would be "docusaurus".</td>
  </tr>
</table>

请注意,第一个表列已换行。我希望它们不要包装,这样更容易阅读。如何制作 <code> 阻止级别,使其不包裹?

1 回复 | 直到 6 年前

Yangshun Tay 6 年前

有两种方法可以做到这一点,每种方法都有自己的权衡,但都会产生相同的结果。

1、使用 `<pre>`

插入 <预处理(>); 进入 <code> 。请注意,这不是编写HTML的标准方式。根据规范 <代码(>); 应该在里面 <预处理(>); 相反这适用于Docusaurus站点。

<td><code>organizationName</code></td>

而是写为:

<td><code><pre>organizationName</pre></code></td>

2、添加自定义CSS目标 `<代码(>);` [推荐]

添加CSS

code.block {
  white-space: nowrap;
}

并执行以下操作:

<td><code class="block">organizationName</code></td>

第二条路更干净,我决定了。因为我只在 <代码(>); 用作表中的第一列,我使用了以下CSS,这也是 Bootstrap website 使用。

table td:first-child > code {
  white-space: nowrap;
}

执行上述操作的好处是,我可以对我的表使用降价语法,而不必向其中添加自定义类:

| `organizationName` | The GitHub user ... |

最终结果

推荐文章

TarJae · 渲染徽标。pdf输出的页眉中的png-Rmarkdown

2 年前

TheInfiniteWin2 · 是否有python库允许从标记转换为html(包括列表)?[闭门]

2 年前

Minyi Han · 为什么索引中必须包含一些R代码。预订的Rmd?

6 年前

Sam · 如何在Bitbucket和github标记中显示数学表达式?

6 年前

user1981275 · 使用R CMD build在vignette中未应用R标记主题

6 年前

loki · 在RMarkdown iSlides{.columns-2}布局中强制断列

6 年前

dougmacklin · 盖茨比。js:在Markdown中预处理相对路径链接

6 年前

marnix · 从命令行搜索Jupyter笔记本标记单元格

6 年前

StackedQ the red crafteryt · Github和npm表降价之间的差异

6 年前

Yangshun Tay · 如何在不换行的表中使用标记?[副本]

6 年前

如何在不换行的表中使用标记?[副本]

1、使用 <pre>

2、添加自定义CSS目标 <代码(>); [推荐]

最终结果

1、使用 `<pre>`

2、添加自定义CSS目标 `<代码(>);` [推荐]