### Example URL for Loading Markdown

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

An example URL demonstrating how to load Markdown content and specify a theme using URL parameters. The `md` parameter points to a raw Markdown file.

```bash
https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md
```

--------------------------------

### Electron Desktop Application Setup

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Sets up a cross-platform Electron desktop application. Manages window creation, development server loading, and external link handling. Requires Electron and related packages.

```typescript
// electron/main/src/app.ts
import { app, shell, BrowserWindow } from 'electron';
import './Menu';

export interface Options extends Electron.BrowserWindowConstructorOptions {
  preload?: string;
  webpath?: string;
}

export class App {
  app = app;
  win?: BrowserWindow;

  async createWindow(options: Options = {}, loadURL?: string) {
    await app.whenReady();

    const opts: Options = {
      width: 850,
      height: 600,
      minWidth: 850,
      minHeight: 600,
      center: true,
      webPreferences: {
        nodeIntegrationInWorker: true,
        nodeIntegration: true,
        contextIsolation: false,
      },
      ...options,
    };

    if (options.preload) {
      opts.webPreferences.preload = options.preload;
    }

    this.win = new BrowserWindow(opts);

    if (process.env.NODE_ENV === 'development') {
      this.win.loadURL(loadURL || 'http://localhost:3000/');
      this.win.webContents.openDevTools();
    } else {
      this.win.loadFile(options.webpath);
    }

    // 处理外部链接
    this.win.webContents.setWindowOpenHandler(({ url }) => {
      if (/^https?:\]\/\//.test(url)) {
        shell.openExternal(url);  // 在默认浏览器中打开
        return { action: 'deny' };
      }
      return { action: 'allow', overrideBrowserWindowOptions: { modal: true } };
    });

    return this.win;
  }
}

// 构建桌面应用
// npm run dist-mac    # 构建 macOS 版本
// npm run dist-win64  # 构建 Windows 64位版本
// npm run dist-linux  # 构建 Linux 版本

```

--------------------------------

### Load Markdown Content via URL Parameter

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Provides an example URL structure for loading Markdown content dynamically. The `md` parameter should contain the URL of the Markdown resource.

```bash
https://<URL>?md=<Markdown 资源 URL>
```

--------------------------------

### Display JSX Code Blocks

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Shows an example of a JSX code block as rendered by wxmp. This is useful for displaying code snippets in web applications.

```jsx
function Demo() {
  return <div className="demo">Hello World!</div>
}
```

--------------------------------

### Ignore Content with HTML Comments

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Illustrates how to use HTML comments `<!--rehype:ignore:start-->` and `<!--rehype:ignore:end-->` to hide content from the WeChat Markdown editor preview while still showing it in other preview tools.

```markdown
# 注释忽略

<!--rehype:ignore:start-->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。<!--rehype:ignore:end-->
```

--------------------------------

### Convert Markdown to WeChat HTML

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Converts Markdown text to HTML suitable for WeChat Official Accounts. It uses a unified pipeline with remark and rehype plugins for GFM, math, code highlighting, and custom CSS injection. Ensure all necessary plugins are installed.

```typescript
import { VFile } from 'vfile';
import { unified } from 'unified';
import * as csstree from 'css-tree';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import remarkMath from 'remark-math';
import rehypePrism from 'rehype-prism-plus';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';
import rehypeAttrs from 'rehype-attr';
import rehypeIgnore from 'rehype-ignore';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';

export type MarkdownToHTMLOptions = {
  preColor?: string;      // 主题主色调
  previewTheme?: string;  // 预览主题名称
};

export function markdownToHTML(md: string, css: string, opts: MarkdownToHTMLOptions = {}) {
  // 解析 CSS 样式表
  const ast = csstree.parse(css, {
    parseAtrulePrelude: false,
    parseRulePrelude: false,
    parseValue: false,
    parseCustomProperty: false,
    positions: false,
  });

  // 从 CSS AST 中提取样式数据
  const data = cssdata(ast.children.head, {}, { color: opts.preColor, theme: opts.previewTheme });

  // 构建 unified 处理管道
  const processor = unified()
    .use(remarkParse)                              // 解析 Markdown
    .use(remarkGfm)                                // 支持 GFM 扩展语法
    .use(remarkMath)                               // 支持数学公式
    .use(remarkRehype, { allowDangerousHtml: true }) // 转换为 HTML AST
    .use(rehypeRaw)                                // 处理原始 HTML
    .use(rehypeKatex)                              // 渲染 KaTeX 公式
    .use(rehypePrism, { ignoreMissing: true })     // 代码高亮
    .use(rehypeIgnore, {})                         // 支持忽略标记
    .use(rehypeAttrs, { properties: 'attr' })      // 支持自定义属性
    .use(rehypeRewrite, {
      rewrite: (node, _index, parent) => {
        // 将样式注入到对应元素
        if (node?.type === 'element') {
          const className = node.properties?.className as string[];
          let style = data[node.tagName] || '';
          if (className) {
            className.forEach((name) => {
              if (data[`.${name}`]) style = data[`.${name}`];
            });
          }
          if (style) {
            node.properties.style = style + (node.properties.style || '');
          }
        }
      },
    })
    .use(stringify);

  const file = new VFile();
  file.value = md;
  const hastNode = processor.runSync(processor.parse(file), file);
  return String(processor.stringify(hastNode, file));
}

// 使用示例
const markdown = `
# 标题

这是一段 **加粗** 和 *斜体* 文字。

\`\`\`javascript
function hello() {
  console.log('Hello WeChat!');
}
\`\`\`

数学公式：$E = mc^2$
`;

const cssTheme = `
  h1 { color: #009874; font-size: 18px; }
  p { font-size: 16px; line-height: 1.5em; }
`;

const html = markdownToHTML(markdown, cssTheme, { preColor: '#009874' });
// 输出格式化后的 HTML，可直接复制到微信公众号编辑器

```

--------------------------------

### Render Math Formulas in Web Apps

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Demonstrates how to display mathematical formulas within a web application using wxmp. This snippet is for inline math display.

```math
$\c = \pm\sqrt{a^2 + b^2}$ 和 $C_L$ 数学公式行内显示
```

--------------------------------

### Implement Theme Switcher Command for Markdown Editor

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Enables switching between editor themes and preview themes. Editor themes affect the code editing area's appearance, while preview themes control the rendered article's style. Requires React, styled-components, and context API.

```typescript
import React, { useContext } from 'react';
import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
import styled from 'styled-components';
import { Context, previewThemes, PreviewThemeValue, themes, ThemeValue } from '../store/context';

const Select = styled.select`
  max-width: 4rem;
  padding: 0 0.2rem;
  font-size: 0.7rem;
  border-radius: 0.2rem;
`;

// 编辑器主题切换组件
const ThemeView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = () => {
  const { theme, setTheme } = useContext(Context);

  const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
    setTheme(ev.target.value as ThemeValue);
  };

  return (
    <Select value={theme} onChange={handleChange}>
      {(Object.keys(themes) as Array<ThemeValue>).map((name) => (
        <option key={name} value={name}>{themes[name].label}</option>
      ))}
    </Select>
  );
};

export const theme: ICommand = {
  name: 'theme',
  keyCommand: 'theme',
  button: (command, props, opts) => <ThemeView command={command} editorProps={{ ...props, ...opts }} />,
};

// 预览主题切换组件
const ThemePreviewView: React.FC<{}> = () => {
  const { setCss, previewTheme, setPreviewTheme } = useContext(Context);

  const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
    const value = ev.target.value as PreviewThemeValue;
    setPreviewTheme(value);
    setCss(previewThemes[value].value);  // 同步更新 CSS
  };

  return (
    <Select value={previewTheme} onChange={handleChange}>
      {(Object.keys(previewThemes) as Array<PreviewThemeValue>).map((name) => (
        <option value={name} key={name}>{previewThemes[name].label}</option>
      ))}
    </Select>
  );
};

export const previeTheme: ICommand = {
  name: 'previewTtheme',
  keyCommand: 'previewTtheme',
  button: () => <ThemePreviewView />,
};
```

--------------------------------

### Access wxmp Web Application

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

The URL to access the wxmp web application after deploying it using Docker. Ensure the port matches the one specified in the `docker run` command.

```bash
http://localhost:96611/
```

--------------------------------

### Pull wxmp Docker Image

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Instructions for pulling the wxmp Docker image from Docker Hub and GitHub Container Registry. Use the latest tag for the most recent version.

```bash
docker pull wcjiang/wxmp
```

```bash
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latest
```

--------------------------------

### Docker Deployment for Web Version

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Provides Docker commands to pull and run the web version of the WeChat Official Account Markdown Editor. Supports custom port mapping and uses official images from Docker Hub or GitHub Container Registry.

```bash
# 拉取 Docker 镜像
docker pull wcjiang/wxmp
# 或使用 GitHub Container Registry
docker pull ghcr.io/jaywcjlove/wxmp:latest

# 运行容器
docker run --name wxmp --rm -d -p 8113:3000 wcjiang/wxmp:latest

# 后台运行并保持
docker run --name wxmp -itd -p 8113:3000 wcjiang/wxmp:latest

# 使用 GitHub Container Registry 镜像
docker run --name wxmp -itd -p 8113:3000 ghcr.io/jaywcjlove/wxmp:latest

# 访问应用
# 打开浏览器访问: http://localhost:8113/

# Dockerfile 内容
# FROM lipanski/docker-static-website:latest
# COPY ./build .

```

--------------------------------

### Using Context in a React Component

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Demonstrates how to consume the global context in a React component to access and update the preview theme. Includes a select element for theme selection.

```typescript
// 在组件中使用
function MyComponent() {
  const { markdown, setMarkdown, previewTheme, setPreviewTheme } = useContext(Context);

  const handleThemeChange = (theme: PreviewThemeValue) => {
    setPreviewTheme(theme);
  };

  return (
    <div>
      <select onChange={(e) => handleThemeChange(e.target.value)}>
        {Object.keys(previewThemes).map((key) => (
          <option key={key} value={key}>{previewThemes[key].label}</option>
        ))}
      </select>
    </div>
  );
}

```

--------------------------------

### Implement Color Command for Markdown Editor

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Provides a color picker to change the article's theme color. The selected color is automatically applied to preview theme elements. Requires React, styled-components, and context API.

```typescript
import React, { useContext } from 'react';
import { ICommand } from '@uiw/react-markdown-editor';
import styled from 'styled-components';
import { Context } from '../store/context';

const Input = styled.input`
  position: absolute;
  opacity: 0;
  height: 20px;
  width: 20px;
`;

const ColorView: React.FC<{}> = () => {
  const { preColor, setPreColor } = useContext(Context);

  const handleChange = (evn: React.ChangeEvent<HTMLInputElement>) => {
    setPreColor(evn.target.value);
  };

  const color = preColor ? preColor : 'currentColor';

  return (
    <button type="button">
      <svg viewBox="0 0 24 24" fill="none" height="16" width="16">
        <path fill="currentColor" d="M8.203 2.004c1.261 0..." />
        <path d="M16.859 16.875a3 3 0 1 0 4.242 0l-2.121-2.121-2.121 2.12Z" fill={color} />
      </svg>
      <Input type="color" value={preColor} onChange={handleChange} />
    </button>
  );
};

export const colorCommand: ICommand = {
  name: 'color',
  keyCommand: 'color',
  button: () => <ColorView />,
};
```

```typescript
// 使用示例 - 在 HomePage 中注册命令
import { colorCommand } from './commands/color';

<MarkdownEditor
  toolbarsMode={[copy, colorCommand, 'fullscreen', 'preview']}
  // ... 其他配置
/>
```

--------------------------------

### Initialize and Manage Global State with Provider Component

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Use this React component to initialize and manage global state. It supports loading preset themes and external Markdown content via URL parameters for sharing functionality. TanStack Query is used for managing asynchronous data fetching.

```typescript
import React, { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { PreviewThemeValue, previewThemes, ThemeValue, Context, markdownString } from './context';
import { useMdSource } from './getMdSource';

export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
  const [searchParams, setSearchParams] = useSearchParams();

  // 从 URL 参数获取主题设置
  const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue;
  const initPreviewTheme = paramPreviewTheme || 'underscore';

  // 从 URL 参数获取外部 Markdown 地址
  const mdurl = searchParams.get('md');

  // 状态初始化
  const [markdown, setMarkdown] = React.useState<string>(mdurl ? '' : markdownString);
  const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value);
  const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme);
  const [theme, setTheme] = React.useState<ThemeValue>('default');
  const [preColor, setPreColor] = React.useState<string>(
    previewThemes[initPreviewTheme] ? previewThemes[initPreviewTheme].color : '',
  );

  // 加载外部 Markdown 内容
  const { data: mddata, isLoading } = useMdSource(mdurl);

  useEffect(() => {
    if (mdurl && mddata) {
      setMarkdown(mddata);
    }
  }, [mddata, mdurl]);

  // 同步主题到 URL 参数
  useEffect(() => {
    if (paramPreviewTheme !== previewTheme) {
      searchParams.set('theme', previewTheme);
      setSearchParams(searchParams);
    }
  }, [previewTheme]);

  return (
    <Context.Provider
      value={{
        preColor, setPreColor,
        isLoading, setIsLoading,
        markdown, setMarkdown,
        css, setCss,
        previewTheme, setPreviewTheme,
        theme, setTheme,
      }}
    >
      {children}
    </Context.Provider>
  );
};

// URL 参数使用示例
// 加载外部 Markdown 并指定主题：
// https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/user/repo/main/README.md

```

--------------------------------

### Editor and Preview Theme Configuration

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Defines configurations for editor themes like Dracula and GitHub Light, and preview themes with associated styles and colors. Supports dynamic replacement of CSS variables for theme customization.

```typescript
import React, { useContext, createContext } from 'react';
import { defaultTheme } from '@uiw/react-markdown-editor';
import { dracula } from '@uiw/codemirror-theme-dracula';
import { githubLight } from '@uiw/codemirror-theme-github';

// 编辑器主题配置
export const themes = {
  default: { label: '默认主题', value: defaultTheme },
  dracula: { label: 'Dracula Theme', value: dracula },
  githubLight: { label: 'Github Light Theme', value: githubLight },
  // ... 更多主题
};

// 预览主题配置
export const previewThemes = {
  default: { label: '翡翠绿', value: defStyle, color: '#009874' },
  simple: { label: '简洁蓝', value: simpleStyle, color: '#0f4c81' },
  underscore: { label: '下划线黄', value: underscoreStyle, color: '#ffb11b' },
  base: { label: '简洁', value: baseStyle, color: '' },
};

// 主题色替换规则
export const replaceData: Record<PreviewThemeValue, ReplaceData[]> = {
  underscore: [
    { select: 'a', name: 'color', value: '{{color}}' },
    { select: 'h1', name: 'box-shadow', value: 'inset 0 -0.9rem 0 0 {{color}}' },
    { select: 'h2', name: 'box-shadow', value: 'inset 0 -0.7rem 0 0 {{color}}' },
  ],
  default: [
    { select: 'a', name: 'color', value: '{{color}}' },
    { select: 'h1', name: 'border-bottom', value: '3px solid {{color}}' },
    { select: 'h2', name: 'background', value: '{{color}}' },
  ],
};

```

--------------------------------

### HomePage Component with Markdown Editor

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Integrates a Markdown editor with custom toolbars and live preview. Requires @uiw/react-markdown-editor and context for state management. Supports automatic line wrapping and custom preview components.

```typescript
import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
import { useContext } from 'react';
import { EditorView } from '@codemirror/view';
import { Preview } from './Preview';
import { copy } from '../../commands/copy';
import { colorCommand } from '../../commands/color';
import { theme as themeCommand, previeTheme } from '../../commands/theme';
import { cssCommand } from '../../commands/css';
import { Context, themes } from '../../store/context';

export const HomePage = () => {
  // 获取默认命令并添加主题切换
  const commands = [...getCommands(), themeCommand];

  const { theme, markdown, isLoading, setMarkdown } = useContext(Context);
  const themeValue = themes[theme].value;

  const handleChange = (value: string) => setMarkdown(value);

  return (
    <MarkdownEditor
      value={markdown}
      toolbars={commands}                  // 左侧工具栏
      theme={themeValue}                   // 编辑器主题
      readOnly={isLoading}                 // 加载时只读
      toolbarsMode={[                      // 右侧工具栏
        cssCommand,                        // 编辑主题按钮
        previeTheme,                       // 预览主题选择
        copy,                              // 复制按钮
        colorCommand,                      // 取色器
        'fullscreen',                      // 全屏
        'preview'                          // 预览切换
      ]}
      extensions={[EditorView.lineWrapping]} // 启用自动换行
      renderPreview={Preview}              // 自定义预览组件
      previewWidth="420px"                 // 预览宽度（微信公众号宽度）
      onChange={handleChange}
      visible={true}
      height="calc(100vh - 4.6rem)"
    />
  );
};

```

--------------------------------

### Custom Preview Component for Markdown

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Renders Markdown content as styled HTML, simulating WeChat Official Account width. Supports direct content editing and custom styling via context. Converts Markdown to HTML using markdownToHTML utility.

```typescript
import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
import styled from 'styled-components';
import { useContext } from 'react';
import { Context } from '../../store/context';
import { markdownToHTML } from '../../utils/markdownToHTML';

// 预览容器样式，模拟微信公众号宽度
export const Warpper = styled.div`
  width: 375px;
  padding: 20px;
  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
  min-height: 100%;
  font-size: 17px;
`;

export const Preview = (props: MarkdownPreviewProps) => {
  const { css, preColor, previewTheme } = useContext(Context);

  // 将 Markdown 转换为带样式的 HTML
  const html = markdownToHTML(props.source || '', css, {
    preColor,      // 主题色
    previewTheme   // 预览主题名称
  });

  return (
    <Warpper
      contentEditable           // 允许直接编辑预览内容
      spellCheck={false}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
};

```

--------------------------------

### Display CSS Code Blocks

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Illustrates how wxmp renders CSS code blocks, including styling for list items. This is for web application display.

```css
li {
  font-size: 16px;
  margin: 0;
  line-height: 26px;
  color: rgb(30 41 59);
  font-family:-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif;
}
```

--------------------------------

### Load Remote Markdown Content with useMdSource Hook

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

This custom hook, built with TanStack Query, fetches Markdown content from a remote URL. It includes error handling and loading state management, displaying a user-friendly error message on failure. It returns data, loading status, and error information.

```typescript
import { useQuery } from '@tanstack/react-query';
import toast from 'react-hot-toast';

export const useMdSource = (url: string | null) => {
  return useQuery(['database-list', url], () => {
    if (!url) return Promise.resolve('');

    return fetch(url)
      .then((response) => response.text())
      .then((data) => data)
      .catch((err) => {
        toast.error(
          <div style={{ fontSize: '0.8rem' }}>
            加载失败！<a href={url}>请检查你的URL</a>
          </div>,
        );
        return '';
      });
  });
};

// 使用示例
function MarkdownLoader({ url }: { url: string }) {
  const { data, isLoading, error } = useMdSource(url);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败</div>;

  return <div>{data}</div>;
}

// 支持的 URL 格式
// - GitHub Raw 文件: https://raw.githubusercontent.com/user/repo/main/README.md
// - 任何返回纯文本的 URL

```

--------------------------------

### Render HTML Comments for Styling

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Demonstrates using HTML comments in Markdown to apply custom styles to content. This feature allows for dynamic styling of text elements.

```html
<ruby>
  汉 <rt>Han</rt>
</ruby>
```

--------------------------------

### Implement One-Click Copy Functionality with Copy Command

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

This React component is a toolbar command for a Markdown editor that enables one-click copying of the rendered HTML content to the clipboard. The copied content is suitable for direct pasting into editors like WeChat Official Account.

```typescript
import React from 'react';
import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
import toast from 'react-hot-toast';

const CopyView: React.FC <{
  command: ICommand;
  editorProps: IMarkdownEditor & ToolBarProps
}> = (props) => {
  const { editorProps } = props;

  const handleClick = () => {
    // 获取预览区域的 DOM 元素
    const dom: HTMLDivElement | null = editorProps.preview.current;
    if (!dom) {
      toast.error(<div>预览区域未找到</div>);
      return;
    }

    dom.focus();
    const htmlContent = dom.innerHTML;

    // 使用 Clipboard API 复制 HTML 内容
    navigator.clipboard
      .writeText(htmlContent)
      .then(() => {
        toast.success(<div>复制成功！去公众号编辑器粘贴吧！</div>);
      })
      .catch((err) => {
        toast.error(<div>{JSON.stringify(err)}</div>);
        console.error('Failed to copy: ', err);
      });
  };

  return (
    <button type="button" onClick={handleClick}>
      {props.command.icon}
    </button>
  );
};

export const copy: ICommand = {
  name: 'copy',
  keyCommand: 'copy',
  button: (command, props, opts) => (
    <CopyView command={command} editorProps={{ ...props, ...opts }} />
  ),
  icon: (
    <svg fill="currentColor" viewBox="0 0 24 24" height="16" width="16">
      <path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" />
      <path d="M4 22h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2zm2-10h6v2H6v-2zm0 4h6v2H6v-2z" />
    </svg>
  ),
};

```

--------------------------------

### Define CSS Styles for Markdown Elements

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Provides a comprehensive list of CSS selectors and their intended use for customizing the appearance of various Markdown elements within wxmp. This includes headings, links, code blocks, and more.

```css
/* 1~6 标题样式定义 */
h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
a { color: red; } /* 超链接样式定义 */
strong {} /* 加粗样式定义 */
del {} /* 删除线样式定义 */
em {}  /* 下划线样式定义 */
u {}   /* 下划线样式定义 */
p {}   /* 段落样式定义 */
ul {}  /* 无序列表样式定义 */
ol {}  /* 有序列表样式定义 */
li {}  /* 列表条目样式定义 */
blockquote {} /* 块级引用样式定义 */
table {}
td {}
th {}
pre {}        /* 样式定义 */
.code-highlight {} /* 代码块样式定义 */
.code-line {}      /* 代码块行样式定义 */
.code-spans {}     /* 代码块行样式定义 */

sup {} /* GFM 脚注样式定义 */
.footnotes-title {} /* GFM 脚注，参考标题样式定义 */
.footnotes-list {} /* GFM 脚注，参考列表样式定义 */

.image-warpper {} /* 图片父节点样式定义 */
.image {} /* 图片样式定义 */

/* 部分代码高亮样式 */
.comment {}
.property {}
.function {}
.keyword {}
.punctuation {}
.unit {}
.tag {}
.color {}
.selector {}
.quote {}
.number {}
.attr-name {}
.attr-value {}
```

--------------------------------

### React Context for Global State Management

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

Defines the interface for the global context and initializes it with default values. This context manages markdown content, CSS styles, preview themes, and editor themes.

```typescript
// Context 接口定义
export interface CreateContext {
  preColor: string;                                         // 当前主题色
  setPreColor: React.Dispatch<React.SetStateAction<string>>;
  markdown: string;                                         // Markdown 内容
  setMarkdown: React.Dispatch<React.SetStateAction<string>>;
  css: string;                                              // 当前 CSS 样式
  setCss: React.Dispatch<React.SetStateAction<string>>;
  previewTheme: PreviewThemeValue;                          // 预览主题
  setPreviewTheme: React.Dispatch<React.SetStateAction<PreviewThemeValue>>;
  theme: ThemeValue;                                        // 编辑器主题
  setTheme: React.Dispatch<React.SetStateAction<ThemeValue>>;
}

// 创建 Context
export const Context = createContext<CreateContext>({
  preColor: '',
  setPreColor: () => {},
  markdown: '',
  setMarkdown: () => {},
  css: previewThemes['underscore'].value,
  setCss: () => {},
  previewTheme: 'underscore',
  setPreviewTheme: () => {},
  theme: 'default',
  setTheme: () => {},
});

```

--------------------------------

### Run wxmp Docker Container

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Commands to run the wxmp Docker container, mapping port 8113 to the container's port 3000. Options include detached mode (`-d`) and interactive mode (`-itd`).

```bash
docker run --name wxmp --rm -d -p 8113:3000 wcjiang/wxmp:latest
```

```bash
# Or
docker run --name wxmp -itd -p 8113:3000 wcjiang/wxmp:latest
```

```bash
# Or
docker run --name wxmp -itd -p 8113:3000 ghcr.io/jaywcjlove/wxmp:latest
```

--------------------------------

### Apply Custom Styles with HTML Comments

Source: https://github.com/jaywcjlove/wxmp/blob/master/README.md

Shows how to use HTML comments `<!--rehype:style=...-->` to apply CSS styles directly within Markdown content. This is useful for targeted styling.

```markdown
## 定义标题样式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

支持对某些文字变更样式，如_文字颜色_<!--rehype:style=color: red;-->，文字颜色将被设置为红色(red)。
```

--------------------------------

### Default Theme CSS for Article Typography

Source: https://context7.com/jaywcjlove/wxmp/llms.txt

This CSS file defines the styles for a 'Jade Green' theme, affecting links, headings, paragraphs, blockquotes, code blocks, inline code, code highlighting, footnotes, and images. It's used to customize the visual presentation of articles.

```css
/* website/src/themes/default.md.css - 翡翠绿主题示例 */

/* 链接样式 */
a {
  color: #009874;
  text-decoration: none;
  font-size: 14px;
}

/* 一级标题 */
h1 {
  display: table;
  text-align: center;
  color: #3f3f3f;
  font-size: 18px;
  font-weight: bold;
  margin: 2em auto 1em;
  padding: 0 1em;
  border-bottom: 3px solid #009874;
}

/* 二级标题 */
h2 {
  display: table;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 4em auto 2em;
  padding: 0 0.3em;
  border-radius: 0.3em;
  background: #009874;
}

/* 段落 */
p {
  font-size: 16px;
  line-height: 1.5em;
  padding: 0.5em 0 !important;
}

/* 引用块 */
blockquote {
  font-size: 14px;
  border-left: none;
  padding: 0.5em 1em;
  border-radius: 4px;
  background: rgba(27, 31, 35, 0.05);
}

/* 代码块 */
pre {
  display: block;
  overflow-x: auto;
  padding: 1em;
  color: rgb(51, 51, 51);
  background: rgb(248, 248, 248);
  border-radius: 0.3em;
  line-height: 1.5;
}

/* 行内代码 */
.code-spans {
  color: #333;
  background: rgba(27, 31, 35, 0.05);
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  font-weight: bold;
}

/* 代码高亮 */
.keyword { color: #d73a49; }
.function { color: #6f42c1; }
.string { color: #22863a; }
.number { color: #005cc5; }
.comment { color: #6a737d; }

/* GFM 脚注 */
.footnotes-title { font-size: 14px; font-weight: bold; margin: 3em 0 0.6em 0; }
.footnotes-list { font-size: 10px; font-style: italic; }

/* 图片 */
.image-warpper { text-align: center; }
.image { display: initial; max-width: 100%; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.