Showing 4,522 of 4,522 total issues
Bare URL used Open
https://codepen.io/chalarangelo/pen/OJYLapp- Read upRead up
- Exclude checks
MD034 - Bare URL used
Tags: links, url
Aliases: no-bare-urls
This rule is triggered whenever a URL is given that isn't surrounded by angle brackets:
For more information, see http://www.example.com/.To fix this, add angle brackets around the URL:
For more information, see <http:></http:>.Rationale: Without angle brackets, the URL isn't converted into a link in many markdown parsers.
Note: if you do want a bare URL without it being converted into a link, enclose it in a code block, otherwise in some markdown parsers it will be converted:
`http://www.example.com`Line length Open
excerpt: Create a cool effect that fades out the siblings of a hovered item with a few lines of CSS.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
The rise of dark mode in recent years has made many website favicons feel awkward or even impossible to see in some cases. Provided you have the appropriate assets, it's relatively easy to create a responsive favicon that can **adapt to the user's color scheme preferences**.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
Leveraging embedded styles in SVG images and the `prefers-color-scheme` media query, we can create an appropriate `<g>` element to group all the elements of the icon. Then, using the `id` of the group, we can apply the color palette for each design. Here's what our final SVG asset looks like:- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
The very first step when reviewing CSS is to check if the **result looks right**. This might mean comparing the end result to a **design mockup** or checking if every interaction behaves according to the animation principles the team has agreed upon. **Responsiveness** is also a key factor to consider, so you should check if the page looks right on **different screen sizes**. The visual check is probably the most straightforward and important step, but unfortunately many developers stop there.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Bare URL used Open
https://codepen.io/chalarangelo/pen/KKOwRRZ- Read upRead up
- Exclude checks
MD034 - Bare URL used
Tags: links, url
Aliases: no-bare-urls
This rule is triggered whenever a URL is given that isn't surrounded by angle brackets:
For more information, see http://www.example.com/.To fix this, add angle brackets around the URL:
For more information, see <http:></http:>.Rationale: Without angle brackets, the URL isn't converted into a link in many markdown parsers.
Note: if you do want a bare URL without it being converted into a link, enclose it in a code block, otherwise in some markdown parsers it will be converted:
`http://www.example.com`Inline HTML Open
<style>- Read upRead up
- Exclude checks
MD033 - Inline HTML
Tags: html
Aliases: no-inline-html
This rule is triggered whenever raw HTML is used in a markdown document:
Inline HTML header
To fix this, use 'pure' markdown instead of including raw HTML:
# Markdown headerRationale: Raw HTML is allowed in markdown, but this rule is included for those who want their documents to only include "pure" markdown, or for those who are rendering markdown documents in something other than HTML.
Inline HTML Open
<div class="pattern-box zigzag"></div>- Read upRead up
- Exclude checks
MD033 - Inline HTML
Tags: html
Aliases: no-inline-html
This rule is triggered whenever raw HTML is used in a markdown document:
Inline HTML header
To fix this, use 'pure' markdown instead of including raw HTML:
# Markdown headerRationale: Raw HTML is allowed in markdown, but this rule is included for those who want their documents to only include "pure" markdown, or for those who are rendering markdown documents in something other than HTML.
Line length Open
As you can see, both techniques are straightforward to implement. Depending on your needs one might be more suitable than the other. Generally speaking, grid is more flexible in most cases and can help if you have more complex layouts, which can include a header or sidebar.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
- `max-width` - Use `ch` units to set the maximum width in the middle of the optimal readable range (60-80 characters).- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
For **multi-line text**, you'll still need to use `overflow: hidden` to **prevent the text from overflowing** its container. However, you can't use `text-overflow: ellipsis` to add an ellipsis at the end of the text.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
> This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
First header should be a top level header Open
## Scrollable containers that snap- Read upRead up
- Exclude checks
MD002 - First header should be a top level header
Tags: headers
Aliases: first-header-h1
Parameters: level (number; default 1)
This rule is triggered when the first header in the document isn't a h1 header:
## This isn't a H1 header
### Another headerThe first header in the document should be a h1 header:
# Start with a H1 header
## Then use a H2 for subsectionsLine length Open
One important note is that using `:any-link` is different to using the `[href]` attribute selector. The `:any-link` pseudo-class does not select empty links, whereas the `[href]` attribute selector does.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
One of the fanciest text effects I've seen is an **animated underline**, where the underline appears to grow from the left side of the text when the user hovers over it. This effect can be achieved using CSS and the `::after` pseudo-element. But first, let me show you what it looks like:- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
For starters, you can create a **container element** with `display: flex` to align the prefix and the input field. You can then remove the border and outline from the `<input>` field. Apply them to the parent element instead to make it look like an input box.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
Finally, you can use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
Using it in conjunction with the `initial` value, you can reset all styles to their **default values**. However, this will not affect the `direction` and `unicode-bidi` properties, as well as any custom properties you may have defined.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
After hiding the `<input>` element offscreen, you can style the `<label>` element to look like a switch. The `::after` pseudo-element is used to create a circular knob for the switch. The `:checked` pseudo-class selector is used to change the position of the knob and the background color of the switch when the checkbox is checked.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
- Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.