git 在 Markdown 中添加灰色区域

Add gray area in markdown

提问by Waylan

I currently editing readme.md file and I want to put for some text block gray area like this.

我目前正在编辑 readme.md 文件，我想放置一些像这样的文本块灰色区域。

They used the ```javascriptannotation to start writing in gray but the problem occurs when you need to add links to the texts.

他们使用```javascript注释开始以灰色书写，但是当您需要向文本添加链接时会出现问题。

Is there another option to provide a gray frame?

还有其他选项可以提供灰框吗？

UPDATE:

更新：

Security

安全

- Abstract

-摘要

• Test 123
• Follow testing

• 测试 123
• 遵循 测试

Lets say that I want that the Test 123 text and the follow will be inside a gray area(like code) how do I achieve this? the problem here is with the URL in the follow section...

假设我希望 Test 123 文本和后续文本位于灰色区域（如代码）内，我该如何实现？这里的问题在于以下部分中的 URL...

update 2

更新 2

## Test 
   <a name="Test"></a><a name="1.1"></a>
   - **Abstract**
    - Test 123
    - Follow  [testing artifacts](http://2.bp.blogspot.com) (more Unit )

回答by Waylan

The behavior you point to is using a code block. A code block's sole purpose it to display raw code. The fact that GitHub chose to apply a style which changed the background color to gray is coincidental. They could have easily chosen any other color or none at all.

您指向的行为是使用代码块。代码块的唯一目的是显示原始代码。GitHub 选择应用将背景颜色更改为灰色的样式这一事实纯属巧合。他们可以很容易地选择任何其他颜色或根本不选择。

If you want a block of text to stand out as different but still be rendered as normal Markdown text, then you absolutely do not want a code block. There are a few other options available.

如果您希望文本块与众不同，但仍作为普通 Markdown 文本呈现，那么您绝对不想要代码块。还有一些其他选项可用。

You could use a blockquote:

你可以使用一个块引用：

 > - Test 123
 > - Follow  [testing artifacts](http://2.bp.blogspot.com) (more Unit )

Again, the actual styling will depend on the styles defined on the site you are posting your Markdown to. Each site may be different. Here on StackOverflow you get a yellow (orange?) box, like this:

同样，实际样式将取决于您将 Markdown 发布到的站点上定义的样式。每个站点可能不同。在 StackOverflow 上，您会看到一个黄色（橙色？）框，如下所示：

• Test 123
• Follow testing artifacts(more Unit )

• 测试 123
• 跟踪 测试工件（更多单元）

On GitHub you get a gray bar on the left and no background shading, but that is the best you can probably do.

在 GitHub 上，您会在左侧看到一个灰色条并且没有背景阴影，但这可能是您能做的最好的事情。

Another alternative is to use raw HTML to define your own block. However, for security reasons, GitHub will strip that out.

另一种选择是使用原始 HTML 来定义您自己的块。但是，出于安全原因，GitHub 会将其删除。

GitHub probably won't strip out a simple <div>, but there are various other problems. First of all, as per the Markdown rules, "Markdown formatting syntax is not processed within block-level HTML tags." While some Markdown implementations have added a way to force Markdown processing within block-level HTML, it does not appear that GitHub supports any of them.

GitHub 可能不会去掉一个简单的<div>，但还有其他各种问题。首先，根据 Markdown规则，“Markdown 格式化语法不在块级 HTML 标签内处理。” 虽然一些 Markdown 实现添加了一种在块级 HTML 中强制进行 Markdown 处理的方法，但 GitHub 似乎并不支持它们中的任何一个。

And then there is the issue of how to style the div. You could assign a class, but then how do you define the CSS to style that class? You can't include CSS in your Markdown (GitHub will strip that out). While one could include inline styles (using the styleattribute on the div), GitHub stips the styleattribute out as well.

然后是如何设置 div 样式的问题。您可以分配一个类，但是如何定义 CSS 来设置该类的样式？你不能在 Markdown 中包含 CSS（GitHub 会去掉它）。虽然可以包含内联样式（使用 上的style属性div），但 GitHub 也删除了该style属性。

If you really want full control over how your document looks, then you need to host your own site on your own server. When using sites like GitHub, you are stuck with their choices.

如果您真的想完全控制文档的外观，那么您需要在自己的服务器上托管自己的站点。当使用像 GitHub 这样的网站时，你会被他们的选择所困扰。

回答by Matthew Daly

Github uses its own flavour of markdown called Github Flavoured Markdown. The effect you want is essentially just wrapping text in <code>tags. This can be achieved by:

Github 使用自己的Markdown风格，称为Github Flavored Markdown。您想要的效果本质上只是将文本包装在<code>标签中。这可以通过以下方式实现：

1. Indenting a code block by four spaces
2. Wrapping a code block in three sets of backticks, with an optional language after the first set for syntax highlighting.
3. Wrapping some inline code in a single set of backticks

1. 将代码块缩进四个空格
2. 将代码块包装在三组反引号中，在第一组反引号之后使用可选语言进行语法高亮显示。
3. 在一组反引号中包装一些内联代码

The first two also wrap the code in a <pre>tag for formatting purposes.

前两个还将代码包装在一个<pre>标记中以用于格式化目的。

Note that the colour doesn't have to be grey. If your site uses Markdown you can use CSS to change it as normal.

请注意，颜色不必是灰色。如果您的网站使用 Markdown，您可以使用 CSS 正常更改它。

Generally it doesn't make sense to have links inside a code block.

通常，在代码块中包含链接是没有意义的。