wxmp
v2.4.0
Wechat 공식 계정 기사 Markdown 온라인 편집자, Markdown Grammar를 사용하여 아름답고 관대 한 공식 계정 사진 및 텍스트 소개를 만듭니다. 출판 버전의 번거 로움과 일부 기능을 확장 할 수 없기 때문에 개발은 정체되었습니다. 앞으로 크롬 플러그인이 더 이상 개발되지 않을 것이며 (크롬 분기는 일시적으로 존재 함) 웹 버전을 통해 더 많은 풍부한 기능이 사용자 정의됩니다.
필요한 경우 문제에 개발 계획과 일부 기능을 도입하여 도구를보다 완벽하게 만듭니다. 다음 예제는 웹 응용 프로그램에서 효과 디스플레이에 사용됩니다.
다음은 jsx 코드 블록 디스플레이 예제이며 웹 응용 프로그램의 효과 디스플레이 코드를 강조 표시합니다.
function Demo ( ) {
return < div className = "demo" > Hello World! </ div >
} 아래는 css 코드 블록 디스플레이 예제이며 웹 응용 프로그램의 효과 디스플레이 코드를 강조 표시합니다.
li {
font-size : 16 px ;
margin : 0 ;
line-height : 26 px ;
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;
}웹 응용 프로그램에 효과를 표시하는 데 사용됩니다.
인라인 코드 {code: 0}
테이블은 사용자 정의 스타일을 사용할 수 없으며 아직 해결책이 없습니다.
| 헤더 1 | 헤더 2 |
|---|---|
| 키 1 | 가치 1 |
| 키 2 | 가치 2 |
| 키 3 | 가치 3 |
다음은 간단한 Markdown 1 구문 각주 2 입니다. 페이지 끝에 몇 가지 추가 텍스트 설명이 있습니다. 이것은 완전한 각주 3 기능이 아닙니다.
< ruby >
汉 < rt > Han </ rt >
</ ruby >중국어 발음 효과 : 중국인 성격 주문 소리 메모 소리
HTML 주석은 Markdown의 Markdown에서도 사용할 수 있습니다. 이 기능은 일부 컨텐츠의 스타일을 사용자 정의하는 데 사용됩니다. HTML 주석 <!--rehype:xxx--> 사용하여 Markdown을 통해 스타일 사용자 정의를 지원합니다.
## 定义标题样式
<!-- rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px; -->
支持对某些文字变更样式，如_文字颜色_ <!-- rehype:style=color: red; --> ，文字颜色将被设置为红色(red)。<!--rehype:style= stight = --> 종료하고, CSS 스타일을 중간에 랩핑합니다. color: red; 텍스트를 빨간색으로 설정합니다.
이 기능은 HTML 주석을 사용하여 Markdown에서 무시됩니다. 무시 해야하는 내용을 표시합니다. 마크가 시작 <!--rehype:ignore:start--> , 마크 종료 <!--rehype:ignore:end--> , 그리고 Wechat Markdown 편집기 미리보기에 표시되지 않습니다. GitHub와 같은 다른 미리보기 도구에 콘텐츠를 표시합니다.
# 注释忽略
<!-- rehype:ignore:start -->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。 <!-- rehype:ignore:end --> https://<URL>?md=<Markdown 资源 URL>
마크 다운 컨텐츠로드하기위한 URL 샘플 :
https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md
Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md
디렉토리 website/src/themes 에 기본 테마를 저장하고 website/src/store/context.tsx 에서 테마를 구성하고 css 사용하여 스타일을 정의하고 복잡한 선택기를 지원하지 않습니다. 온라인 테마 편집기가 제공되며 모든 사람이 사용할 수 있도록 창고에 수정 및 PR 에 오신 것을 환영합니다.
/* 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 {}Docker를 통해 "WeChat 공식 계정 Markdown 편집기"웹 사이트 응용 프로그램을 쉽게 배포하십시오.
docker pull wcjiang/wxmp
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latestdocker run --name wxmp --rm -d -p 8113:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 8113:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 8113:3000 ghcr.io/jaywcjlove/wxmp:latest브라우저에서 다음 URL에 액세스하십시오
http://localhost:96611/
언제나 그렇듯이 놀라운 기고자 덕분에!
위의 이미지의 기고자 목록, 기고자 사진은 Action-Contributors 4 에 의해 자동으로 생성됩니다.
MIT 라이센스에 따라 라이센스.
github- 스타일의 Markdown 사양 https://github.github.com/gfm/ ↩
각주 https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/ ↩
WeChat 기사는 앵커 점프 및 타사 URL 하이퍼 링크를 열지 않으므로 완전한 각주 기능을 지원하지 않습니다. ↩
액션 기고자 https://github.com/jaywcjlove/github-action-contripors ↩
