Published on

Markdown 常用标记语言

目录

PageTitle
<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />

<TOCInline toc={props.toc} exclude="Introduction" />

<TOCInline toc={props.toc} asDisclosure />

资料


文本块

  • 邮件订阅入口
    Like what you are reading?
BlogNewsletterForm.tsx
<BlogNewsletterForm title="Like what you are reading?" />
链接文本
[链接文本](https://www.example.com)
  • 加粗文本
加粗文本
**加粗文本**

__加粗文本__
  • 斜体文本斜体文本 斜体文本
斜体文本
*斜体文本*

_斜体文本_
  • 加删除线加删除线文本
加删除线
~~加删除线文本~~
  • 脚注:这是一个带有脚注的句子1
脚注
这是一个带有脚注的句子[^1]。
  • 引用块

    这是一个引用块。

引用块
> 这是一个引用块。
  • 警告提示

    CAUTION

警告提示
> [!CAUTION]
  • 列表
    • 子项目1
    • 子项目2
    • 子项目3
列表
- **列表**
  - 子项目1
  * 子项目2
  + 子项目3
  • 任务
  • 任务1
  • 任务2
任务
- [x] 任务1
- [ ] 任务2
  • 表格
表头1表头2
内容1内容2
内容3内容4
表格
| 表头1 | 表头2  |
| ----- | ----- |
| 内容1 | 内容2  |
| 内容3 | 内容4  |
  • 标题
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

Standard citation 2

参考书目和引文
Standard citation [^Nash1950]

[^Nash1950]: Nash, J. (1950). *Equilibrium points in n-person games.* Proceedings of the National Academy of Sciences, 36(1), 48-49.


代码块

code.txt
`Code`
<code>selectAll()</code>
`print("Hello, World!")`
  • Bash
bash.sh
npm start
# or
npm run dev
  • CSS
style.css
.code-highlight {
  @apply float-left min-w-full;
}

.code-line {
  @apply border-opacity-0 -mx-4 block border-l-4 pr-4 pl-4;
}

.code-line.inserted {
  @apply bg-opacity-20 bg-green-500;
}

.code-line.deleted {
  @apply bg-opacity-20 bg-red-500;
}

.highlight-line {
  @apply border-primary-500 bg-opacity-50 -mx-4 border-l-4 bg-gray-700;
}

.line-number::before {
  @apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400;
  content: attr(line);
}
  • Python
sum.py
def fib():
    a, b = 0, 1
    while True:            # First iteration:
        yield a            # yield 0 to start with and then
        a, b = b, a + b    # a will now be 1, and b will also be 1, (0 + 1)

for index, fibonacci_number in zip(range(10), fib()):
     print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))
  • Javascript
sum.js
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string
sum.js
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string
siteMetadata.js
analytics: {
    // supports plausible, simpleAnalytics or googleAnalytics
    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
    simpleAnalytics: false, // true or false
    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
  },
siteMetadata.js
// 删除和加亮
analytics: {
-   umamiAnalytics: {
-     // We use an env variable for this site to avoid other users cloning our analytics ID
-     umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
-   },
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
},
  • Javascript XML
PageTitle.tsx
// Or import PageTitle from './components/PageTitle.js' if you are using js
import PageTitle from './components/PageTitle.tsx'
;<PageTitle> Using JSX components in MDX </PageTitle>
  • TypeScript
DonutChart.tsx
'use client'

import { Doughnut } from 'react-chartjs-2'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'

ChartJS.register(ArcElement, Tooltip, Legend)

const DonutChart = ({ data }) => {
  return <Doughnut data={data} />
}

export default Doughnut
contentlayer.config.ts
export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    tags: { type: 'list', of: { type: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\/)/, ''),
    }
    ...
  },
}))

内容嵌入块

  • 在线图片嵌入链接 Deploy with Vercel
favicon.ico
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog)
  • 本地图片(定义大小) favicon
favicon.ico
<Image alt="favicon" src="/static/favicons/favicon.ico" width={100} height={100} />
  • 本地图片(自适应) favicon
favicon.ico
![favicon](/static/favicons/favicon.ico)
  • 本地图片并排
    favicon
    favicon
    favicon
    favicon
favicon.ico
  <div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
    <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
      ![favicon](/static/favicons/favicon.ico)
    </div>
    <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
      ![favicon](/static/favicons/favicon.ico)
    </div>
    <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
      ![favicon](/static/favicons/favicon.ico)
    </div>
    <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
      ![favicon](/static/favicons/favicon.ico)
    </div>
  </div>
  • 对话框

agent.html

{' '}

<iframe
  title="agent"
  src="https://udify.app/chat/"
  height="500px"
  width="100%"
  className="iframe"
></iframe>
  • 本地视频

Video.mp4
<video controls alt="Video" src="/File/Video.mp4" width={800} height={400} />
  • 在线视频
Video.webm
<video controls>
  <source
    src="https://github-production-user-asset-6210df.s3.amazonaws.com/28362229/258559849-2124c81f-b99d-4431-839c-347e01a2616c.webm"
    type="video/webm"
  />
</video>

Licence

MIT © Timothy Lin

LICENSE
[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) © [Timothy Lin](https://www.timrlx.com)

Footnotes

  1. 这是脚注内容。

  2. Nash, J. (1950). Equilibrium points in n-person games. Proceedings of the National Academy of Sciences, 36(1), 48-49.