docs: add badges to all extensions
This commit is contained in:
Hans Pagel
@@ -1,4 +1,7 @@
|
||||
# Bold
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-bold)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-bold?minimal=true)
|
||||
|
||||
Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly.
|
||||
|
||||
Type `**two asterisks**` or `__two underlines__` and it will magically transform to **bold** text while you type.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Code
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-code?minimal=true)
|
||||
|
||||
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
||||
|
||||
Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Highlight
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-highlight)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-highlight?minimal=true)
|
||||
|
||||
Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
|
||||
|
||||
Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Italic
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-italic)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-italic?minimal=true)
|
||||
|
||||
Use this extension to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly.
|
||||
|
||||
Type `*one asterisk*` or `_one underline_` and it will magically transform to *italic* text while you type.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Link
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-link)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-link?minimal=true)
|
||||
|
||||
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
|
||||
|
||||
In a real world application, you would probably add a more sophisticated user interface.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Strike
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-strike)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-strike?minimal=true)
|
||||
|
||||
Use this extension to render ~~striked text~~. If you pass `<s>`, `<del>`, `<strike>` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly.
|
||||
|
||||
Type <code>∼∼text between tildes∼∼</code> and it will be magically ~~striked through~~ while you type.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# TextStyle
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-text-style)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true)
|
||||
|
||||
This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or font-color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family).
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Underline
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-underline)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-underline?minimal=true)
|
||||
|
||||
Use this extension to render text <u>underlined</u>. If you pass `<u>` tags, or text with inline `style` attributes setting `text-decoration: underline` in the editor’s initial content, they all will be rendered accordingly.
|
||||
|
||||
Be aware that underlined text in the Internet usually indicates that it’s a clickable link. Don’t confuse your users with underlined text.
|
||||
|
||||
Reference in New Issue
Block a user