You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: demo/components/MarkdownSample.mdx
+8-8
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ We get lots of complaints about it actually, with people regularly asking us thi
11
11
12
12
We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
13
13
14
-
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downside of doing something stupid like disabling our base styles.
14
+
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
15
15
16
16
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
17
17
@@ -31,7 +31,7 @@ It adds a new `prose` class that you can slap on any block of vanilla HTML conte
31
31
</article>
32
32
```
33
33
34
-
For more information about how to use the plugin and the features it includes, [read the documentation](#).
34
+
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
35
35
36
36
---
37
37
@@ -80,17 +80,17 @@ And that's the end of this section.
80
80
81
81
### We should make sure that looks good, too.
82
82
83
-
Sometimes you have headings directly underneath each other. In those cases you have often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
83
+
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
84
84
85
-
### When a heading comes after a paragraph...
85
+
### When a heading comes after a paragraph …
86
86
87
87
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
88
88
89
89
-**I often do this thing where list items have headings.**
90
90
91
91
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
92
92
93
-
I often have two or three paragraphs in these list items too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
93
+
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
94
94
95
95
-**Since this is a list, I need at least two items.**
96
96
@@ -179,13 +179,13 @@ We also need to make sure inline code looks good, like if I wanted to talk about
179
179
180
180
### Sometimes I even use `code` in headings
181
181
182
-
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in tildes"_ trick works pretty well though really.
182
+
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
183
183
184
-
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the tildes but it is absolutely not worth the madness it would require to avoid it.
184
+
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
185
185
186
186
#### We haven't used an `h4` yet
187
187
188
-
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
188
+
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
189
189
190
190
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
0 commit comments