Add gray area in markdown

问题:

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

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

Is there another option to provide a gray frame?

UPDATE:

Security

- Abstract

• Test 123
• Follow testing

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...

update 2

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

回答1:

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.

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.

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:

• Test 123
• Follow testing artifacts (more Unit )

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

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

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.

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 style attribute on the div), GitHub stips the style attribute out as well.

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.

回答2:

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:

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

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

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

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