diff --git a/src/components/editor/WechatEditor.tsx b/src/components/editor/WechatEditor.tsx index 3232000..efac7c4 100644 --- a/src/components/editor/WechatEditor.tsx +++ b/src/components/editor/WechatEditor.tsx @@ -24,6 +24,7 @@ import { Button } from '@/components/ui/button' import { Copy } from 'lucide-react' import { MobileEditor } from './components/MobileEditor' import { DesktopEditor } from './components/DesktopEditor' +import { getExampleContent } from '@/lib/utils/loadExampleContent' export default function WechatEditor() { const { toast } = useToast() @@ -171,7 +172,8 @@ export default function WechatEditor() { description: "当前文章未保存,是否继续?", action: ( { - setValue('# 新文章\n\n开始写作...') + const exampleContent = getExampleContent() + setValue(exampleContent) setIsDraft(false) }}> 继续 @@ -182,7 +184,8 @@ export default function WechatEditor() { return } - setValue('# 新文章\n\n开始写作...') + const exampleContent = getExampleContent() + setValue(exampleContent) setIsDraft(false) }, [isDraft, toast]) @@ -262,6 +265,15 @@ export default function WechatEditor() { }) } else if (savedContent) { setValue(savedContent) + } else { + // 如果没有保存的内容或草稿,则加载示例内容 + const exampleContent = getExampleContent() + setValue(exampleContent) + toast({ + title: "欢迎使用 NeuraPress", + description: "已加载示例内容,您可以开始编辑或查看效果", + duration: 3000, + }) } }, [toast, handleDiscardDraft]) diff --git a/src/example-v2.md b/src/example-v2.md index 997d0e2..aa9ab8b 100644 --- a/src/example-v2.md +++ b/src/example-v2.md @@ -182,8 +182,4 @@ function fancyAlert(arg) { 用双波浪号包裹文字(例如 ~~像这样~~)会显示为删除效果。 ``` **渲染效果:** -~~像这样~~ - - -**脚注** -[^1]: 我的参考内容。 ↩ \ No newline at end of file +~~像这样~~ \ No newline at end of file diff --git a/src/lib/markdown/parser.ts b/src/lib/markdown/parser.ts index 1f93a5f..89e2395 100644 --- a/src/lib/markdown/parser.ts +++ b/src/lib/markdown/parser.ts @@ -2,6 +2,7 @@ import { marked } from 'marked' import type { RendererOptions } from './types' import { MarkdownRenderer } from './renderer' import { baseStylesToString } from './styles' +import type { Tokens } from 'marked' export class MarkdownParser { private options: RendererOptions @@ -36,32 +37,6 @@ export class MarkdownParser { } }) - // 添加脚注支持 - const options = this.options // 在闭包中保存 options 引用 - marked.use({ - extensions: [{ - name: 'footnote', - level: 'inline', - start(src: string) { - const match = src.match(/^\[\^([^\]]+)\]/) - return match ? match.index : undefined - }, - tokenizer(src: string) { - const match = /^\[\^([^\]]+)\]/.exec(src) - if (match) { - const token = { - type: 'footnote', - raw: match[0], - text: match[1], - tokens: [] - } - return token as any - } - return undefined - } - }] - }) - // 添加 Mermaid 支持 marked.use({ extensions: [{ diff --git a/src/lib/markdown/renderer.ts b/src/lib/markdown/renderer.ts index 50d075a..2393a59 100644 --- a/src/lib/markdown/renderer.ts +++ b/src/lib/markdown/renderer.ts @@ -366,17 +366,10 @@ export class MarkdownRenderer { // 添加删除线支持 this.renderer.del = ({ text }: Tokens.Del) => { - const delStyle = (this.options.inline?.del || {}) - const styleStr = cssPropertiesToString(delStyle) + const styleOptions = (this.options.inline?.del || {}) + const styleStr = cssPropertiesToString(styleOptions) return `${text}` } - - // 添加脚注支持 - this.renderer.footnote = (token: any) => { - const footnoteStyle = (this.options.inline?.footnote || {}) - const styleStr = cssPropertiesToString(footnoteStyle) - return `[${token.text}]` - } } public getRenderer(): typeof marked.Renderer.prototype { diff --git a/src/lib/utils/loadExampleContent.ts b/src/lib/utils/loadExampleContent.ts new file mode 100644 index 0000000..8215e15 --- /dev/null +++ b/src/lib/utils/loadExampleContent.ts @@ -0,0 +1,125 @@ +/** + * Utility function to load the example.md content + * This provides a default content for the editor when first opened + */ + +// Import the example.md content directly +const exampleContent = `# NeuraPress 简介 +Markdown 转微信公众帐号内容神器,能让\`Markdown\`内容,无需作任何调整就能**一键复制**到微信公众号使用,特别针对代码展示做了优化。 + + +GitHub 地址: + +[https://github.com/tianyaxiang/neurapress](https://github.com/tianyaxiang/neurapress) + +> 使用微信公众号编辑器有一个十分头疼的问题——粘贴出来的代码,格式错乱,而且特别丑。 + + + + +### Markdown基本语法 +#### 标题 +支持6种大小的标题,分别对应\`#\`,\`##\`,\`###\`,\`####\`,\`#####\`,\`######\`,和样式文件中的\`h1,...,h6\`如: +# H1 +## H2 +#### 行内代码 +如:\`AppCompatActivity\`类,markdown对行内代码的语法是前后用:\\\`,其中 \\\` 为windows键盘左上角那个, + +#### 强调 +**我是强调** +#### 斜体 +试试*斜体* +#### 强调的斜体 +试试***强调的斜体*** +#### 删除 +试试 ~~删除~~ +#### 外链的超链接 +试试外链的超链接:[我是外链的超链接](https://www.leti.ltd),markdown对链接的语法为:\`[]()\`,如:\`[我是外链的超链接](https://www.leti.ltd)\` +#### 页内的超链接 +试试页内的超链接:[我是页内的超链接](#jump_1),注:你先要在要跳转的到地方放置一个类似:\`任意内容\`的锚点。由\`id="jump_1" \`来匹配。 + + +#### 有序列表 +1. 有序列表 1 +2. 有序列表 2 +3. 有序列表 3 + +#### 无序列表 +- 无序列表 1 +- 无序列表 2 +- 无序列表 3 + +#### 引用块 +只需要在前面加 \`>\`,如下: +>我是引用块 +微信公众号:孟晨 +欢迎关注我,一起学习,一起进步,做终身学习者! + +#### 分隔线 +*** + + +### Markdown扩展语法 + +#### 表格 +| 班级 | 男生 | 女生 | +|-----|-----|------| +| 一(7)班 | 30 | 25 | +| 一(8)班 | 25 | 30 | + + +### 直接支持html,css +如果你懂html和css,那下面这些效果就不在话下了: + +来个页内跳转,跳转到文未的:\`我是页内跳转到的位置\` ,对应:\`id="jump_1"\` +先给点颜色你看看 +再给点颜色你看看 +试试改变字体大小 + +我是页内跳转到的位置 + +### 任务列表 +- [x] 已完成任务 +- [ ] 未完成任务 +- [ ] 未完成任务2 + +### 数学公式 +使用两个美元符号包裹TeX或LaTeX格式的数学公式: + +$$ +E=mc^2 +$$ + +### 代码块显示效果 +注:markdown对代码块的语法是开始和结束行都要添加:\\\`\\\`\\\`,其中 \\\` 为windows键盘左上角那个,如下: +\`\`\`yaml +kind: RoleBinding +apiVersion: rbac.authorization.k8s.io/v1 +metadata: + name: haimaxy-sa-rolebinding + namespace: kube-system +subjects: +- kind: ServiceAccount + name: haimaxy-sa + namespace: kube-system +roleRef: + kind: Role + name: haimaxy-sa-role + apiGroup: rbac.authorization.k8s.io +\`\`\` + + +在页面头部提供了很多中**代码主题**风格,可以根据需要选择合适的即可。 + +### 用户体验 +- 支持自动保存 +- 支持多种主题 +- 支持快捷键 +`; + +/** + * Returns the example.md content + */ +export function getExampleContent(): string { + return exampleContent; +} diff --git a/src/types/marked.d.ts b/src/types/marked.d.ts index 74b0cf5..335d8a3 100644 --- a/src/types/marked.d.ts +++ b/src/types/marked.d.ts @@ -1,7 +1,9 @@ import { marked } from 'marked'; declare module 'marked' { - interface RendererThis { - footnote: (token: any) => string; + interface Renderer { + } + + namespace Tokens { } }