Skip to content

Commit 50e2282

Browse files
committed
Add style guide
1 parent 245e93c commit 50e2282

2 files changed

Lines changed: 439 additions & 0 deletions

File tree

styleguide/template.md

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
# Metadata and Markdown Template
2+
3+
This core-docs template contains examples of Markdown syntax, as well as guidance on setting the metadata. To get the most of it, you must view both the [raw Markdown](https://raw.githubusercontent.com/dotnet/docs/master/styleguide/template.md) and the [rendered view](https://github.com/dotnet/docs/blob/master/styleguide/template.md) (for instance, the raw Markdown shows the metadata block, while the rendered view does not).
4+
5+
When creating a Markdown file, you should copy this template to a new file, fill out the metadata as specified below, set the H1 heading above to the title of the article, and delete the content.
6+
7+
8+
## Metadata
9+
10+
The full metadata block is above (in the [raw Markdown](https://raw.githubusercontent.com/dotnet/docs/master/styleguide/template.md)), divided into required fields and optional fields. Some key notes:
11+
12+
- You **must** have a space between the colon (:) and the value for a metadata element.
13+
- If an optional metadata element does not have a value, comment out the element with a # or remove it (do not leave it blank or use "na"); if you are adding a value to an element that was commented out, be sure to remove the #.
14+
- Colons in a value (for example, a title) break the metadata parser. In this case, surround the title with double quotes (for example, `title: "Writing .NET Core console apps: An advanced step-by-step guide"`).
15+
- **title**: This title will appear in search engine results. You can also add a pipe (|) followed by the product name (for example, `title: Developing Libraries with Cross Platform Tools | .NET Core`). The title doesn't need be identical to the title in your H1 heading and it should contain 65 characters or less (including | PRODUCT NAME).
16+
- **author**, **manager**, **ms.reviewer**: The author field should contain the **GitHub username** of the author, not their alias. The "manager" and "ms.reviewer" fields, on the other hand, should contain Microsoft aliases. ms.reviewer specifies the name of the PM/dev associated with the article or feature.
17+
- **ms.devlang** defines the technology. Some of the supported values are: dotnet, cpp, csharp, fsharp, vb and xml.
18+
- **ms.assetid**: This is the GUID of the article that is used for internal tracking purposes such as Business Intelligence (BI). When creating a new Markdown file, get a GUID from [https://www.guidgenerator.com](https://www.guidgenerator.com).
19+
20+
## Basic Markdown, GFM, and special characters
21+
22+
All basic and GitHub Flavored Markdown (GFM) is supported. For more information on these, see:
23+
24+
- [Baseline Markdown syntax](https://daringfireball.net/projects/markdown/syntax)
25+
- [GFM documentation](https://guides.github.com/features/mastering-markdown)
26+
27+
Markdown uses special characters such as \*, \`, and \# for formatting. If you wish to include one of these characters in your content, you must do one of two things:
28+
29+
- Put a backslash before the special character to "escape" it (for example, `\*` for a \*)
30+
- Use the [HTML entity code](http://www.ascii.cl/htmlcodes.htm) for the character (for example, `*` for a *).
31+
32+
## File name
33+
34+
File names use the following rules:
35+
* Contain only lowercase letters, numbers, and hyphens.
36+
* No spaces or punctuation characters. Use the hyphens to separate words and numbers in the file name.
37+
* Use action verbs that are specific, such as develop, buy, build, troubleshoot. No -ing words.
38+
* No small words - don't include a, and, the, in, or, etc.
39+
* Must be in Markdown and use the .md file extension.
40+
* Keep file names reasonably short. They are part of the URL for your articles.
41+
42+
43+
44+
## Headings
45+
46+
Use sentence-style capitalization. Always capitalize:
47+
- The first word of a heading.
48+
- The word following a colon in a title or heading (for example, "How to: Sort an array").
49+
50+
Headings should be done using atx-style, that is, use 1-6 hash characters (#) at the start of the line to indicate a heading, corresponding to HTML headings levels H1 through H6. Examples of first- and second-level headers are used above.
51+
52+
There **must** be only one first-level heading (H1) in your topic, which will be displayed as the on-page title.
53+
54+
If your heading finishes with a `#` character, you need to add an extra `#` character in the end in order for the title to render correctly. For example, `# Async Programming in F# #`.
55+
56+
Second-level headings will generate the on-page TOC that appears in the "In this article" section underneath the on-page title.
57+
58+
### Third-level heading
59+
#### Fourth-level heading
60+
##### Fifth level heading
61+
###### Sixth-level heading
62+
63+
## Text styling
64+
65+
*Italics*
66+
Use for files, folders, paths (for long items, split onto their own line) - new terms - URLs (unless rendered as links, which is the default).
67+
68+
**Bold**
69+
Use for UI elements.
70+
71+
## Links
72+
73+
### Internal Links
74+
75+
To link to a header in the same Markdown file (also known as anchor links), you'll need to find out the id of the header you're trying to link to. To confirm the ID, view the source of the rendered article, find the id of the header (for example, `id="blockquote"`), and link using # + id (for example, `#blockquote`).
76+
The id is auto-generated based on the header text. So, for example, given a unique section named `## Step 2`, the id would look like this `id="step-2"`.
77+
78+
- Example: [Chapter 1](#chapter-1)
79+
80+
To link to a Markdown file in the same repo, use [relative links](https://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2), including the ".md" at the end of the filename.
81+
82+
- Example: [Readme file](../readme.md)
83+
- Example: [Welcome to .NET](../docs/welcome.md)
84+
85+
To link to a header in a Markdown file in the same repo, use relative linking + hashtag linking.
86+
87+
- Example: [.NET Community](../docs/welcome.md#community)
88+
89+
### External Links
90+
91+
To link to an external file, use the full URL as the link.
92+
93+
- Example: [GitHub](http://www.github.com)
94+
95+
If a URL appears in a Markdown file, it will be transformed into a clickable link.
96+
97+
- Example: http://www.github.com
98+
99+
### Links to APIs
100+
101+
The build system has some extensions that allow us to link to .NET Core APIs without having to use external links.
102+
When linking to an API, you can use its unique identifier (UID) that is auto-generated from the source code.
103+
104+
You can use one of the following syntax:
105+
1. Markdown link: `[link_text](xref:UID)`
106+
2. Auto link: `<xref:UID>`
107+
3. Shorthand form: `@UID`
108+
109+
- Example: `@System.String`
110+
- Example: `[String class](xref:System.String)`
111+
112+
For more information about using this notation, see [Using cross reference](https://dotnet.github.io/docfx/tutorial/links_and_cross_references.html#using-cross-reference).
113+
114+
> Right now, there is no easy way to find the UIDs. The best way to find the UID for an API is to search for it in this repo: [docascode/coreapi](https://github.com/docascode/coreapi). We're working on having a better system in the future.
115+
116+
When the UID contains the special characters \` or \#, the UID value needs to be HTML encoded as %60 and %23 respectively as in the following examples:
117+
- Example: @System.Threading.Tasks.Task\`1 becomes `@System.Threading.Tasks.Task%601`
118+
- Example: @System.Exception.\#ctor becomes `@System.Exception.%23ctor`
119+
120+
## Lists
121+
122+
### Ordered lists
123+
124+
1. This
125+
1. Is
126+
1. An
127+
1. Ordered
128+
1. List
129+
130+
131+
#### Ordered list with an embedded list
132+
133+
1. Here
134+
1. comes
135+
1. an
136+
1. embedded
137+
1. Miss Scarlett
138+
1. Professor Plum
139+
1. ordered
140+
1. list
141+
142+
143+
### Unordered Lists
144+
145+
- This
146+
- is
147+
- a
148+
- bulleted
149+
- list
150+
151+
152+
##### Unordered list with an embedded list
153+
154+
- This
155+
- bulleted
156+
- list
157+
- Mrs. Peacock
158+
- Mr. Green
159+
- contains
160+
- other
161+
1. Colonel Mustard
162+
1. Mrs. White
163+
- lists
164+
165+
166+
## Horizontal rule
167+
168+
---
169+
170+
## Tables
171+
172+
| Tables | Are | Cool |
173+
| ------------- |:-------------:| -----:|
174+
| col 3 is | right-aligned | $1600 |
175+
| col 2 is | centered | $12 |
176+
| col 1 is default | left-aligned | $1 |
177+
178+
You can use a [Markdown table generator tool](http://www.tablesgenerator.com/markdown_tables) to help creating them more easily.
179+
180+
## Code
181+
182+
The best way to include code is to include snippets from a working sample. Create your
183+
sample following the instructions in the [contributing guide](../CONTRIBUTING.md#contributing-to-samples).
184+
185+
You can include the code using include syntax:
186+
187+
```
188+
[!code-csharp[<title>](<pathToFile>#<RegionName)]
189+
```
190+
191+
The example above shows C# syntax, but other languages are supported.
192+
Use `code-fsharp` for F# samples; use `code-vbnet` for Visual Basic samples.
193+
Other languages that are supported are:
194+
* C++: `code-cpp`
195+
* HTML: `code-html`
196+
* JavaScript: `code-javascript`
197+
* Powershell: `code-ps`
198+
* SQL: `code-sql`
199+
* XML: `code-xml`
200+
201+
202+
203+
The text you place for `<title>` shows up as a rollover on the text. The `<pathToFile>`
204+
is the path to the source file. The `<RegionName>` should be a region in your source
205+
code that should be included. Use the `#region` and `#endregion` preprocessor syntax
206+
to specify the region of code to include.
207+
208+
For cases where regions don't work, you can specify the start and end of a snippet
209+
using an XML element name in a single line comment. For example, you could write this in C#:
210+
211+
```csharp
212+
// <CodeToInclude>
213+
int j = 5;
214+
int i ; 10;
215+
int sum = i + j;
216+
// </CodeToInclude>
217+
```
218+
219+
In other languages, use the comment syntax for that language.
220+
Finally, you can use line
221+
numbers: `#L1-L10` would include lines 1 through 10. We discourage line numbers
222+
because they are very brittle.
223+
224+
Including snippets from full programs ensures that all code runs through our Continuous Integration (CI)
225+
system. However, if you need to show something that causes compile time or
226+
runtime errors, you can use inline code blocks.
227+
228+
### Inline code blocks with language identifier
229+
230+
Use three backticks (\`\`\`) + a language ID to apply language-specific color coding to a code block. Here is the entire list of [GFM language IDs](https://github.com/jmm/gfm-lang-ids/wiki/GitHub-Flavored-Markdown-(GFM)-language-IDs).
231+
232+
##### C&#9839;
233+
234+
```c#
235+
using System;
236+
namespace HelloWorld
237+
{
238+
class Hello
239+
{
240+
static void Main()
241+
{
242+
Console.WriteLine("Hello World!");
243+
244+
// Keep the console window open in debug mode.
245+
Console.WriteLine("Press any key to exit.");
246+
Console.ReadKey();
247+
}
248+
}
249+
}
250+
```
251+
#### Python
252+
253+
```python
254+
friends = ['john', 'pat', 'gary', 'michael']
255+
for i, name in enumerate(friends):
256+
print "iteration {iteration} is {name}".format(iteration=i, name=name)
257+
```
258+
#### PowerShell
259+
260+
```powershell
261+
Clear-Host
262+
$Directory = "C:\Windows\"
263+
$Files = Get-Childitem $Directory -recurse -Include *.log `
264+
-ErrorAction SilentlyContinue
265+
```
266+
267+
### Generic code block
268+
269+
Use three backticks (&#96;&#96;&#96;) for generic code block coding.
270+
271+
> The recommended approach is to use code blocks with language identifiers as explained in the previous section to ensure the proper syntax highlighting in the documentation site. Use generic code blocks only when necessary.
272+
273+
```
274+
function fancyAlert(arg) {
275+
if(arg) {
276+
$.docs({div:'#foo'})
277+
}
278+
}
279+
```
280+
281+
### Inline code
282+
283+
Use backticks (&#96;) for `inline code`. Use inline code for command-line commands, database table and column names, and language keywords.
284+
285+
## Blockquotes
286+
287+
> The drought had lasted now for ten million years, and the reign of the terrible lizards had long since ended. Here on the Equator, in the continent which would one day be known as Africa, the battle for existence had reached a new climax of ferocity, and the victor was not yet in sight. In this barren and desiccated land, only the small or the swift or the fierce could flourish, or even hope to survive.
288+
289+
## Images
290+
291+
### Static Image or Animated gif
292+
293+
![this is the alt text](../images/Logo_DotNet.png)
294+
295+
### Linked Image
296+
297+
[![alt text for linked image](../images/Logo_DotNet.png)](https://dot.net)
298+
299+
## Videos
300+
301+
### Channel 9
302+
303+
<iframe src="https://channel9.msdn.com/Shows/On-NET/Shipping-NET-Core-RC2--Tools-Preview-1/player" width="960" height="540" allowFullScreen frameBorder="0"></iframe>
304+
305+
### YouTube
306+
307+
<iframe width="420" height="315" src="https://www.youtube.com/embed/g2a4W6Q7aRw" frameborder="0" allowfullscreen></iframe>
308+
309+
## docs.microsoft extensions
310+
311+
docs.microsoft provides a few additional extensions to GitHub Flavored Markdown.
312+
313+
### Alerts
314+
315+
It's important to use the following alert styles so they render with the proper style in the documentation site. However, the rendering engine on GitHub doesn't diferentiate them.
316+
317+
#### Note
318+
319+
> [!NOTE]
320+
> This is a NOTE
321+
322+
#### Warning
323+
324+
> [!WARNING]
325+
> This is a WARNING
326+
327+
#### Tip
328+
329+
> [!TIP]
330+
> This is a TIP
331+
332+
#### Important
333+
334+
> [!IMPORTANT]
335+
> This is IMPORTANT
336+
337+
And they'll render like this:
338+
![Alert styles](../images/alerts.png)
339+
340+
### Buttons
341+
342+
> [!div class="button"]
343+
[button links](../docs/core/index.md)
344+
345+
You can see an example of buttons in action at the [Intune docs](https://docs.microsoft.com/en-us/intune/get-started/choose-how-to-enroll-devices).
346+
347+
### Selectors
348+
349+
> [!div class="op_single_selector"]
350+
- [macOS](../docs/core/tutorials/using-on-macos.md)
351+
- [Windows](../docs/core/tutorials/using-on-windows.md)
352+
353+
You can see an example of selectors in action at the [Intune docs](https://docs.microsoft.com/en-us/intune/deploy-use/what-to-tell-your-end-users-about-using-microsoft-intune#how-your-end-users-get-their-apps).
354+
355+
### Step-By-Steps
356+
357+
>[!div class="step-by-step"]
358+
[Pre](../docs/csharp/expression-trees-interpreting.md)
359+
[Next](../docs/csharp/expression-trees-translating.md)
360+
361+
You can see an example of step-by-steps in action at the [Advanced Threat Analytics docs](https://docs.microsoft.com/en-us/advanced-threat-analytics/deploy-use/install-ata-step2).

0 commit comments

Comments
 (0)