People skim through documentation. You can grab users attention by using attention signs. To create an attention sign, start a paragraph with one of the predefined keywords followed by a colon. Keyword: message

Note: It is very important to not overuse signs. Make sure each sign counts. Note: It is very important to not overuse signs. Make sure each sign counts.

Warning: Bring attention to a common mistake or an often missed configuration step using a warning sign. Do not use too many warning signs. Warning: Bring attention to a common mistake or an often missed configuration step using a warning sign. Do not use too many warning signs.

Question: Use the question sign to bring extra attention to the main idea of a page. What is the point of the ? Question: Use the question sign to bring an extra attention to the main idea of a page. \ What is the point of the `attention signs`? attention signs

Exercise: write a hello world example in this language Exercise: write a hello world example in this language

Avoid: using multiple versions of inside one project. Avoid: using multiple versions of `ReactJS` inside one project. ReactJS

Don't: commit node_modules to your repository Do not: commit node_modules to your repository Don't: commit node_modules to your repository Do not: commit node_modules to your repository

Tip: use temporary directory to generate the summary file for upload Tip: use temporary directory to generate the summary file for upload

Recommendation: write automated tests for new business logic Recommendation: write automated tests for new business logic

Use fence block to create an explicit attention block. hello world By default, there is only icon. Use to add text hello world Using block makes it easier to include other plugins inside Use this command to setup fresh environment mycommand setup ```attention-note hello world ``` label ```attention-note {label: "Custom Label"} hello world ``` `````attention-note Use this command to setup fresh environment ```cli mycommand setup ``` `````

note warning avoid question recommendation attention-<type>

Use when the built-in types are not enough. The free form parameter defines the type. It is used as a CSS class name, exactly like , , and the other built-in types. hello world only provides the markup placeholders. Each guide is responsible for implementing the CSS for its own types. Use in combination with . Scope rules under to define dark mode colors. attention-custom note warning ```attention-custom my-type hello world ``` attention-custom style.css .theme-znai-dark .znai-attention-block.my-type { border-left: 3px solid #6f42c1; background: #f3effb; } .znai-attention-block.my-type .znai-attention-block-icon { color: #6f42c1; } .theme-znai-dark .znai-attention-block.my-type { border-left-color: #b794f6; background: rgba(159, 122, 234, 0.12); } .theme-znai-dark .znai-attention-block.my-type .znai-attention-block-icon { color: #b794f6; }

Unlike the built-in types, a custom type has no icon by default. Use the parameter to display one. To pick an icons to use go to Feather icons. hello world Combine with the optional hello world icon ```attention-custom my-type {icon: "zap"} hello world ``` icon label ```attention-custom my-type {icon: "zap", label: "Consider"} hello world ```