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