Markdown Examples【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.jsh2 Headingh3 Headingh4 Headingh5 Headingh6 Heading文章用一级标题作为文内大标题其余层级逐级递进。在 Nextra 中这些标题会参与自动生成锚点方便正文内交叉引用。 ### 3.2 强调与删除线 markdown **This is bold text** _This is italic text_ ~~Strikethrough~~注意删除线~~...~~属于 GFMGitHub Flavored Markdown扩展语法Nextra 的解析器基于 MDX 生态默认支持如果切换到其他解析器如纯 CommonMark 实现该特性可能不生效。3.3 行内引用 Develop. Preview. Ship. – Vercel前缀生成 blockquote博客主题会为其应用左侧竖线等样式修饰。3.4 无序与有序列表Unordered - Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Integer molestie lorem at massa Ordered 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa两种列表在文章中均以「先一句引导文字、再列表」的方式组织这是 Nextra 主题下列表排版的推荐写法。3.5 代码行内代码与围栏代码块Inline code围栏代码块在原文中用于展示一个完整的 React 组件示例未标注语言标识渲染为等宽纯文本块 export default function Nextra({ Component, pageProps }) { return ( Head link relalternate typeapplication/rssxml titleRSS href/feed.xml / link relpreload href/fonts/Inter-roman.latin.var.woff2 asfont typefont/woff2 crossOriginanonymous / /Head Component {...pageProps} / / ) } 这段示例代码与本示例中真实存在的 pages/_app.tsx 高度同构——后者同样注入了 RSSalternate链接与Inter字体 preload可以对照阅读import nextra-theme-blog/style.css; import type { AppProps } from next/app; import Head from next/head; import ../styles/main.css; export default function App({ Component, pageProps }: AppProps) { return ( Head link relalternate typeapplication/rssxml titleRSS href/feed.xml / link relpreload href/fonts/Inter-roman.latin.var.woff2 asfont typefont/woff2 crossOriginanonymous / /Head Component {...pageProps} / / ); }实际写作时建议给围栏代码块标注语言如js以启用语法高亮。3.6 表格| **Option** | **Description** | | ---------- | ------------------------------------------------------------------ | | First | Lorem ipsum dolor sit amet, consectetur adipiscing elit... | | Second | Lorem ipsum dolor sit amet, consectetur adipiscing elit... | | Third | Lorem ipsum dolor sit amet, consectetur adipiscing elit... |表头行加粗、首列作为选项名是原文档演示的表格规范GFM 表格语法在 Nextra 下渲染为带边框样式的 HTML 表格。3.7 链接原文档的 Links 小节演示了标准 Markdown 链接语法- [Next.js](https://nextjs.org) - [Nextra](https://nextra.vercel.app/) - [Vercel](http://vercel.com)在 Nextra 中还可以直接写相对仓库/站点内的资源引用MDX 文件.mdx则进一步支持内联 JSX例如 pages/index.mdx 就在 Markdown 中嵌入了原生div结构来排版社交账号列表。3.8 脚注Footnotes- Footnote [^1]. - Footnote [^2]. [^1]: Footnote **can have markup** and multiple paragraphs. [^2]: Footnote text.脚注定义中可以包含加粗等内联标记与多个段落渲染后以角标形式回到正文锚点。该特性同样依赖 GFM 扩展语法。四、渲染管线.md文件如何成为页面理解这些 Markdown 文件如何被消费需要看两处配置next.config.js 中的 Nextra 包装const withNextra require(nextra)({ theme: nextra-theme-blog, themeConfig: ./theme.config.js, // optional: add unstable_staticImage: true to enable Nextras auto image import }); /** type {import(next).NextConfig} */ const nextConfig { // any configs you need }; module.exports withNextra(nextConfig);withNextra把 Nextra 织入 Next.js 配置从此pages/posts/下的每个.md/.mdx文件都被自动编译为一个页面路由markdown.md→/posts/markdownfront matter 成为页面元信息正文交给 MDX 编译。配置中注释掉的unstable_staticImage: true是可选开关用于启用 Nextra 的自动图片导入。theme.config.js 中的主题定制const YEAR new Date().getFullYear(); export default { footer: ( footer small time{YEAR}/time © Your Name. a href/feed.xmlRSS/a /small style jsx{ footer { margin-top: 8rem; } a { float: right; } }/style /footer ), };【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考