Prose
Proseは、HTMLコンテンツにスタイルを適用するコンポーネントです。
俺だけレベルアップな件
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、新たな物語の幕が開く。
あらすじ
死の淵で謎のシステムに選ばれた旬は、唯一のプレイヤーとして成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに隠された秘密へと近づいていく。
登場人物
- 水篠 旬
- ハンタースギルド
- 最上 真
- 向坂 雫
- 白虎ギルド
- 白川 大虎
- ハンター協会
- 後藤 清臣
- 犬飼 晃
セリフ
起きろ。
兄貴！
影の軍団
| 名前 | 役割 |
|---|---|
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
ステータス
プレイヤー情報を確認するには、Enterを押してください。
const player = {
name: "水篠旬",
role: "影の君主",
skills: ["影の抽出", "影の保存"],
}<Prose>
<h1>俺だけレベルアップな件</h1>
<p>
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
<a href="https://sololeveling-anime.net/">新たな物語</a>
の幕が開く。
</p>
<h2>あらすじ</h2>
<p>
死の淵で謎のシステムに選ばれた旬は、<em>唯一のプレイヤー</em>
として成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに
<strong>隠された秘密</strong>へと近づいていく。
</p>
<h3>登場人物</h3>
<ul>
<li>水篠 旬</li>
<li>
ハンタースギルド
<ol>
<li>最上 真</li>
<li>向坂 雫</li>
</ol>
</li>
<li>
白虎ギルド
<ol>
<li>白川 大虎</li>
</ol>
</li>
<li>
ハンター協会
<ol>
<li>後藤 清臣</li>
<li>犬飼 晃</li>
</ol>
</li>
</ul>
<h3>セリフ</h3>
<figure>
<blockquote>
<p>起きろ。</p>
</blockquote>
<figcaption>
水篠旬 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
<hr />
<figure>
<blockquote>
<p>兄貴！</p>
</blockquote>
<figcaption>
諸菱賢太 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
<h3>影の軍団</h3>
<table>
<thead>
<tr>
<th scope="col">名前</th>
<th scope="col">役割</th>
</tr>
</thead>
<tbody>
<tr>
<td>イグリット</td>
<td>先陣を切る騎士</td>
</tr>
<tr>
<td>ベル</td>
<td>圧倒的な力で敵を制圧する兵士</td>
</tr>
<tr>
<td>アイアン</td>
<td>仲間を守る重装兵</td>
</tr>
</tbody>
</table>
<h3>ステータス</h3>
<p>
<code>プレイヤー情報</code>を確認するには、
<kbd>Enter</kbd>を押してください。
</p>
<pre>
<code>
{
'const player = {\n name: "水篠旬",\n role: "影の君主",\n skills: ["影の抽出", "影の保存"],\n}'
}
</code>
</pre>
</Prose>
使い方
import { Prose } from "@yamada-ui/react"
import { Prose } from "@/components/ui"
import { Prose } from "@workspaces/ui"
<Prose />
バリアントを変更する
コード
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
<VStack>
<For each={["solid", "subtle", "surface", "outline"]}>
{(code, index) => (
<Prose key={index} code={code}>
<p>
<code>プレイヤー情報</code>を確認するには、
<kbd>Enter</kbd>を押してください。
</p>
</Prose>
)}
</For>
</VStack>
キーボード
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
<VStack>
<For each={["solid", "subtle", "surface", "outline"]}>
{(kbd, index) => (
<Prose key={index} kbd={kbd}>
<p>
<code>プレイヤー情報</code>を確認するには、
<kbd>Enter</kbd>を押してください。
</p>
</Prose>
)}
</For>
</VStack>
引用
起きろ。
兄貴！
起きろ。
兄貴！
<VStack>
<For each={["solid", "subtle"]}>
{(blockquote, index) => (
<Prose key={index} blockquote={blockquote}>
<figure>
<blockquote>
<p>起きろ。</p>
</blockquote>
<figcaption>
水篠旬 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
<hr />
<figure>
<blockquote>
<p>兄貴！</p>
</blockquote>
<figcaption>
諸菱賢太 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
</Prose>
)}
</For>
</VStack>
テーブル
| 名前 | 役割 |
|---|---|
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
| 名前 | 役割 |
|---|---|
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
<VStack>
<For each={["line", "outline"]}>
{(table, index) => (
<Prose key={index} table={table}>
<table>
<thead>
<tr>
<th scope="col">名前</th>
<th scope="col">役割</th>
</tr>
</thead>
<tbody>
<tr>
<td>イグリット</td>
<td>先陣を切る騎士</td>
</tr>
<tr>
<td>ベル</td>
<td>圧倒的な力で敵を制圧する兵士</td>
</tr>
<tr>
<td>アイアン</td>
<td>仲間を守る重装兵</td>
</tr>
</tbody>
</table>
</Prose>
)}
</For>
</VStack>
リンク
<VStack>
<For each={["plain", "underline"]}>
{(link, index) => (
<Prose key={index} link={link}>
<p>
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
<a href="https://sololeveling-anime.net/">新たな物語</a>
の幕が開く。
</p>
</Prose>
)}
</For>
</VStack>
区切り線
起きろ。
兄貴！
起きろ。
兄貴！
起きろ。
兄貴！
<VStack>
<For each={["solid", "dashed", "dotted"]}>
{(hr, index) => (
<Prose key={index} hr={hr}>
<figure>
<blockquote>
<p>起きろ。</p>
</blockquote>
<figcaption>
水篠旬 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
<hr />
<figure>
<blockquote>
<p>兄貴！</p>
</blockquote>
<figcaption>
諸菱賢太 - <cite>俺だけレベルアップな件</cite>
</figcaption>
</figure>
</Prose>
)}
</For>
</VStack>
サイズを変更する
俺だけレベルアップな件
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、新たな物語の幕が開く。
あらすじ
死の淵で謎のシステムに選ばれた旬は、唯一のプレイヤーとして成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに隠された秘密へと近づいていく。
俺だけレベルアップな件
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、新たな物語の幕が開く。
あらすじ
死の淵で謎のシステムに選ばれた旬は、唯一のプレイヤーとして成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに隠された秘密へと近づいていく。
俺だけレベルアップな件
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、新たな物語の幕が開く。
あらすじ
死の淵で謎のシステムに選ばれた旬は、唯一のプレイヤーとして成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに隠された秘密へと近づいていく。
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Prose key={index} size={size}>
<h1>俺だけレベルアップな件</h1>
<p>
人類最弱兵器と呼ばれるE級ハンター、水篠旬。二重ダンジョンから生還した彼にだけ、
<a href="https://sololeveling-anime.net/">新たな物語</a>
の幕が開く。
</p>
<h2>あらすじ</h2>
<p>
死の淵で謎のシステムに選ばれた旬は、<em>唯一のプレイヤー</em>
として成長する力を手に入れる。クエストと戦いを重ねながら、 ゲートに
<strong>隠された秘密</strong>へと近づいていく。
</p>
</Prose>
)}
</For>
</VStack>
カラースキームを変更する
プレイヤー情報を確認するには、Enterを押してください。
プレイヤー情報を確認するには、Enterを押してください。
<VStack>
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Prose key={index} colorScheme={colorScheme}>
<p>
<code>プレイヤー情報</code>を確認するには、
<kbd>Enter</kbd>を押してください。
</p>
</Prose>
)}
</For>
</VStack>
React Markdown
import Markdown from "react-markdown"
import remarkGfm from "remark-gfm"
影の軍団
| 名前 | 役割 |
|---|---|
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
<Prose>
<Markdown remarkPlugins={[remarkGfm]}>
{`### 影の軍団
| 名前 | 役割 |
| --- | --- |
| イグリット | 先陣を切る騎士 |
| ベル | 圧倒的な力で敵を制圧する兵士 |
| アイアン | 仲間を守る重装兵 |
`}
</Markdown>
</Prose>
HTMLを表示する
影の軍団
影の君主のもとに、新たな仲間が集う。
- イグリット
- ベル
- アイアン
<Prose
dangerouslySetInnerHTML={{
__html:
"<h2>影の軍団</h2><p>影の君主のもとに、新たな仲間が集う。</p><ul><li>イグリット</li><li>ベル</li><li>アイアン</li></ul>",
}}
/>
除外する
ダンジョン攻略記録
任務を終えた水篠旬は、ハンター協会に報告へ向かう。
ハンター協会の掲示板
本日の任務はE級ダンジョンの調査です。
報告を終えた旬は、次のゲートへと向かった。
<Prose>
<h2>ダンジョン攻略記録</h2>
<p>任務を終えた水篠旬は、ハンター協会に報告へ向かう。</p>
<div className="not-prose">
<h2>ハンター協会の掲示板</h2>
<p>
本日の任務は<code>E級ダンジョン</code>の調査です。
</p>
</div>
<p>報告を終えた旬は、次のゲートへと向かった。</p>
</Prose>
Props
類似のコンポーネント
Blockquote
Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。
Code
Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。
Em
Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。
Heading
Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。
Highlight
Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。
Kbd
Kbdは、キーボード入力を表すコンポーネントです。
Mark
Markは、特定のテキストを強調するコンポーネントです。
Text
Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。
使用しているコンポーネント・フック
Blockquote
Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。
Code
Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。
Heading
Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。
Link
Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。
List
Listは、リストを表示するコンポーネントです。デフォルトでは、ul要素をレンダリングします。
NativeTable
NativeTableは、データを効率的に整理して表示するコンポーネントです。
Separator
Separatorは、要素間において区切りを表すコンポーネントです。