Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications.
import { Markdown } from '@lobehub/ui';
| Name | Description | Type | Default |
|---|---|---|---|
| allowHtml | -- | boolean | -- |
| children | -- | string | (required) |
| citations | -- | any[] | -- |
| className | -- | string | -- |
| componentProps | -- | {a?:object;highlight?:any;img?:any;mermaid?:any;pre?:any;video?:any} | -- |
| components | -- | {symbol?:FC<__type>;object?:FC<__type>;text?:FC<__type>;style?:FC<__type>;slot?:FC<__type>;title?:FC<__type>;th?:FC<__type>;tr?:FC<__type>;search?:FC<__type>;article?:FC<__type>;button?:FC<__type>;dialog?:FC<__type>;figure?:FC<__type>;form?:FC<__type>;img?:FC<__type>;link?:FC<__type>;main?:FC<__type>;menu?:FC<__type>;menuitem?:FC<__type>;option?:FC<__type>;switch?:FC<__type>;table?:FC<__type>;small?:FC<__type>;circle?:FC<__type>;time?:FC<__type>;center?:FC<__type>;a?:FC<__type>;abbr?:FC<__type>;address?:FC<__type>;area?:FC<__type>;aside?:FC<__type>;audio?:FC<__type>;b?:FC<__type>;base?:FC<__type>;bdi?:FC<__type>;bdo?:FC<__type>;big?:FC<__type>;blockquote?:FC<__type>;body?:FC<__type>;br?:FC<__type>;canvas?:FC<__type>;caption?:FC<__type>;cite?:FC<__type>;code?:FC<__type>;col?:FC<__type>;colgroup?:FC<__type>;data?:FC<__type>;datalist?:FC<__type>;dd?:FC<__type>;del?:FC<__type>;details?:FC<__type>;dfn?:FC<__type>;div?:FC<__type>;dl?:FC<__type>;dt?:FC<__type>;em?:FC<__type>;embed?:FC<__type>;fieldset?:FC<__type>;figcaption?:FC<__type>;footer?:FC<__type>;h1?:FC<__type>;h2?:FC<__type>;h3?:FC<__type>;h4?:FC<__type>;h5?:FC<__type>;h6?:FC<__type>;head?:FC<__type>;header?:FC<__type>;hgroup?:FC<__type>;hr?:FC<__type>;html?:FC<__type>;i?:FC<__type>;iframe?:FC<__type>;input?:FC<__type>;ins?:FC<__type>;kbd?:FC<__type>;keygen?:FC<__type>;label?:FC<__type>;legend?:FC<__type>;li?:FC<__type>;map?:FC<__type>;mark?:FC<__type>;meta?:FC<__type>;meter?:FC<__type>;nav?:FC<__type>;noindex?:FC<__type>;noscript?:FC<__type>;ol?:FC<__type>;optgroup?:FC<__type>;output?:FC<__type>;p?:FC<__type>;param?:FC<__type>;picture?:FC<__type>;pre?:FC<__type>;progress?:FC<__type>;q?:FC<__type>;rp?:FC<__type>;rt?:FC<__type>;ruby?:FC<__type>;s?:FC<__type>;samp?:FC<__type>;script?:FC<__type>;section?:FC<__type>;select?:FC<__type>;source?:FC<__type>;span?:FC<__type>;strong?:FC<__type>;sub?:FC<__type>;summary?:FC<__type>;sup?:FC<__type>;template?:FC<__type>;tbody?:FC<__type>;td?:FC<__type>;textarea?:FC<__type>;tfoot?:FC<__type>;thead?:FC<__type>;track?:FC<__type>;u?:FC<__type>;ul?:FC<__type>;var?:FC<__type>;video?:FC<__type>;wbr?:FC<__type>;webview?:FC<__type>;svg?:FC<__type>;animate?:FC<__type>;animateMotion?:FC<__type>;animateTransform?:FC<__type>;clipPath?:FC<__type>;defs?:FC<__type>;desc?:FC<__type>;ellipse?:FC<__type>;feBlend?:FC<__type>;feColorMatrix?:FC<__type>;feComponentTransfer?:FC<__type>;feComposite?:FC<__type>;feConvolveMatrix?:FC<__type>;feDiffuseLighting?:FC<__type>;feDisplacementMap?:FC<__type>;feDistantLight?:FC<__type>;feDropShadow?:FC<__type>;feFlood?:FC<__type>;feFuncA?:FC<__type>;feFuncB?:FC<__type>;feFuncG?:FC<__type>;feFuncR?:FC<__type>;feGaussianBlur?:FC<__type>;feImage?:FC<__type>;feMerge?:FC<__type>;feMergeNode?:FC<__type>;feMorphology?:FC<__type>;feOffset?:FC<__type>;fePointLight?:FC<__type>;feSpecularLighting?:FC<__type>;feSpotLight?:FC<__type>;feTile?:FC<__type>;feTurbulence?:FC<__type>;filter?:FC<__type>;foreignObject?:FC<__type>;g?:FC<__type>;image?:FC<__type>;line?:FC<__type>;linearGradient?:FC<__type>;marker?:FC<__type>;mask?:FC<__type>;metadata?:FC<__type>;mpath?:FC<__type>;path?:FC<__type>;pattern?:FC<__type>;polygon?:FC<__type>;polyline?:FC<__type>;radialGradient?:FC<__type>;rect?:FC<__type>;set?:FC<__type>;stop?:FC<__type>;textPath?:FC<__type>;tspan?:FC<__type>;use?:FC<__type>;view?:FC<__type>} | -- |
| customRender | -- | (dom:React.ReactNode,context:{ text: string; })=>ReactNode | -- |
| enableCustomFootnotes | -- | boolean | -- |
| enableImageGallery | -- | boolean | -- |
| enableLatex | -- | boolean | -- |
| enableMermaid | -- | boolean | -- |
| fullFeaturedCodeBlock | -- | boolean | -- |
| onDoubleClick | -- | ()=>void | -- |
| rehypePlugins | -- | any[] | -- |
| remarkPlugins | -- | any[] | -- |
| remarkPluginsAhead | -- | any[] | -- |
| showFootnotes | -- | boolean | -- |
| style | -- | {} | -- |
| variant | -- | "normal"|"chat" | -- |
| fontSize | -- | number | -- |
| headerMultiple | -- | number | -- |
| lineHeight | -- | number | -- |
| marginMultiple | -- | number | -- |
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw HTML, it’s 234 characters. In the raw HTML, there’s more markup than there is text.
This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.
an example | an example | an example
这是删除线 (两个波浪线)
~这不会被渲染为删除线~ (单个波浪线)
This is an example inline link.
| title | title | title |
|---|---|---|
| content | content | content |
$ pnpm installimport { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils';
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';以下是一段Markdown格式的LaTeX数学公式：
我是一个行内公式：
我是一个独立的傅里叶公式：
其中，带有积分符号的项：
我是一个带有分式、测试长度超长的泰勒公式：
我是上面公式的行内版本，看看我会不会折行：
我是一个带有上下标的公式：
我是一个带有 tag 的公式：
我是一个嵌套测试：
$1The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw HTML, it’s 234 characters. In the raw HTML, there’s more markup than there is text.
This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
an example | an example | an example
这是删除线 (两个波浪线)
~这不会被渲染为删除线~ (单个波浪线)
<video poster="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp" src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2"/>
This is an example inline link.
| title | title | title |
|---|---|---|
| content | content | content |
$ pnpm installimport { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils';
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';以下是一段Markdown格式的LaTeX数学公式：
我是一个行内公式：
我是一个独立的傅里叶公式：
其中，带有积分符号的项：
我是一个带有分式、测试长度超长的泰勒公式：
我是上面公式的行内版本，看看我会不会折行：
我是一个带有上下标的公式：
我是一个带有 tag 的公式：
我是一个嵌套测试：
$1export function foo() {
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
}export function foo() {
console.log('Highlighted') // [!code highlight]
}export function foo() { // [!code word:Hello]
const msg = 'Hello World'
console.log(msg) // 打印 Hello World
}export function foo() {
console.log('Focused') // [!code focus]
}export function foo() {
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
}This is an example inline link.
export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}杭州今天和未来几天的天气预报如下：
今天（2月18日）多云，气温在4-12℃之间23。白天多云，夜间转阴7。风力较大，上午为偏东风2-3级，傍晚增大到4级7。
未来几天天气概况：
总体来看，未来几天杭州天气较凉，以阴天和雨天为主，气温在7-11℃之间波动。建议市民适当增添衣物，注意保暖，外出时携带雨具237。
是的,我了解 ToDesktop。ToDesktop 是一个专门用于将 Web 应用转换成桌面应用的构建工具平台。以下是它的主要特点：
快速转换：能在几分钟内将网页应用转换为桌面应用1
跨平台支持：
使用方式：
商业模式：
功能特性：
ToDesktop 特别适合以下场景：
这是一个非常实用的工具，特别是对于那些已经有了 Web 应用，但想要提供原生桌面应用体验的开发者来说。它简化了将 Web 应用转换为桌面应用的过程，使得开发者可以专注于核心业务功能的开发。
嗯，用户问的是“9.8比9.11大吗？”我需要仔细分析这个问题。首先，可能有两种理解：一种是数值比较，另一种是日期比较。
首先看数值比较，9.8和9.11。如果用户指的是数字的话，9.8其实是9.80，而9.11是9.11。这时候需要比较小数点后的部分。0.8相当于0.80，而0.80比0.11大，所以9.8比9.11大。这种情况下答案是对的。
不过用户也有可能是在问日期，比如9月8日和9月11日哪个更晚。这时候9月11日在9月8日之后，所以9.11比9.8大，也就是更晚。这时候答案就相反了。
接下来要看用户的具体意图。问题中有“ma”这个字，可能是“吗”的拼音，所以用户可能在确认是否正确。另外，中文里有时候会用“大”来指日期更晚，比如“你的生日比我大”可能指月份或日期更晚。不过数值比较的话，通常不会用“大”而是直接比较大小。
不过根据常见的数学问题，可能用户是在问数值比较，所以正确答案是9.8确实比9.11大，因为0.8大于0.11。不过需要提醒用户注意小数位数的不同，可能容易混淆。比如有人可能会误以为9.8是9.08，而9.11是9.11，这时候比较的话9.11更大。但根据数学规则，小数点后的位数应该对齐，所以9.8等于9.80，确实大于9.11。
另外，需要确认用户是否了解小数的比较方法，特别是不同位数的小数如何比较。比如从高位到低位依次比较，十分位、百分位等。所以9.8的十分位是8，而9.11的十分位是1，所以直接得出9.8更大。
总结来说，如果问题中的9.8和9.11是数字，那么9.8更大；如果是日期，则9.11更大。但根据常规数学问题，应该回答数值比较的情况，即9.8更大，并解释小数比较的方法。同时需要指出可能的歧义，确保用户明确自己问题的类型。
通过观察 ollama 的运行日志，我发现 think 标签的内容也被传到了上下文中，这与官方文档提到的处理方式有所偏差，然后我就找到了另一个支持 ollama 的 webui 对这个问题的处理方式供参考。
好的,让我来用新的视角解释一下"睡觉"这个词。
这是我为"睡觉"这个词创作的新解释卡片。