wxmp

WeChat Official Account Markdown Editor

บทความบัญชีอย่างเป็นทางการของ WeChat Markdown Editor ใช้ Markdown Grammar เพื่อสร้างรูปภาพบัญชีและข้อความอย่างเป็นทางการของ WeChat ที่สวยงามและใจกว้าง เนื่องจากความยุ่งยากของเวอร์ชันการเผยแพร่และการไร้ความสามารถในการขยายฟังก์ชั่นบางอย่างการพัฒนาจึงหยุดนิ่ง ในอนาคตปลั๊กอิน Chrome จะไม่ได้รับการพัฒนาอีกต่อไป (สาขา Chrome มีอยู่ชั่วคราว) และฟังก์ชั่นที่หลากหลายจะถูกปรับแต่งผ่านเวอร์ชันเว็บ

คุณสมบัติการใช้งาน

แผนการพัฒนาและฟังก์ชั่นบางอย่างสามารถนำเสนอในปัญหาหากจำเป็นทำให้เครื่องมือสมบูรณ์แบบมากขึ้น ตัวอย่างต่อไปนี้ใช้สำหรับการแสดงผลเอฟเฟกต์ในเว็บแอปพลิเคชัน

• รองรับไวยากรณ์พื้นฐานทั้งหมดของ Markdown
• รองรับสไตล์ CSS ที่กำหนดเอง
• รองรับการเลือกหัวข้อและการแก้ไขตัวอย่าง
• รองรับตัวอย่างของทั้งธีมแสงและความมืด
• รองรับการเลือกสไตล์ชุดรูปแบบบล็อก
• รองรับการเลือกสีของสีแทนที่โทนสีโดยรวมของบทความอย่างรวดเร็ว
• รองรับเนื้อหาการโหลดพารามิเตอร์ URL
• รองรับพารามิเตอร์ URL เพื่อเลือกหัวข้อตัวอย่าง
• CI สร้างแอพพลิเคชั่นเดสก์ท็อปอิเล็กตรอนโดยอัตโนมัติ
• รองรับการเลือกขนาดตัวอักษรทั่วโลก

สนับสนุนรูปแบบบล็อกรหัส

ต่อไปนี้เป็นตัวอย่างการแสดงผลโค้ด 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

สนับสนุนเชิงอรรถ GFM

นี่คือเชิงอรรถมาร์เดอร์ ¹ มาร์คดาวน์ ¹ มีคำอธิบายข้อความเพิ่มเติมบางส่วนในตอนท้ายของหน้า โปรดทราบว่านี่ไม่ใช่คุณสมบัติเชิงอรรถ ³ ที่สมบูรณ์

สนับสนุนความคิดเห็น

 < ruby >
  汉 < rt > Han </ rt >
</ ruby >

ผลการออกเสียงอักขระจีน: ชาวจีน ฮั่น อักขระ Zi สะกด เข็มหมุด เสียง หยิน บันทึก จู เสียง หยิน

รองรับสไตล์ที่กำหนดเอง

ความคิดเห็น 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)。

หมายเหตุ: คุณสมบัตินี้อาจเหมาะสำหรับผู้ใช้ที่มีความรู้พื้นฐานบางอย่างเกี่ยวกับส่วนหน้า CSS แต่ก็ง่ายมาก ใช้ <!--rehype:style= to start, --> เพื่อจบและห่อสไตล์ CSS ไว้ตรงกลางเช่น color: red; เพื่อตั้งค่าข้อความสีแดง

แท็กไม่สนใจเนื้อหา

คุณลักษณะนี้ใช้ความคิดเห็น HTML ที่จะถูกละเว้นใน Markdown มันทำเครื่องหมายเนื้อหาที่ต้องเพิกเฉย เครื่องหมายเริ่มต้น <!--rehype:ignore:start--> , เครื่องหมายสิ้นสุด <!--rehype:ignore:end--> และเครื่องหมายจะไม่แสดงใน WeChat Markdown Editor Preview แสดงเนื้อหาในเครื่องมือแสดงตัวอย่างอื่น ๆ เช่น GitHub

 # 注释忽略

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

รองรับเนื้อหาการโหลดพารามิเตอร์ URL

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

ตัวอย่าง URL เพื่อโหลดเนื้อหา markdown:

 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 {}

ปรับใช้

ปรับใช้แอปพลิเคชันเว็บไซต์ "WeChat Official Account Markdown Editor" ได้อย่างง่ายดายผ่าน Docker

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

docker 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/

ผู้มีส่วนร่วม

เช่นเคยขอบคุณผู้มีส่วนร่วมที่น่าทึ่งของเรา!

รายชื่อผู้สนับสนุนของภาพด้านบนรูปภาพผู้สนับสนุนจะถูกสร้างขึ้นโดยอัตโนมัติโดยผู้ร่วมกระทำการ ⁴

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

เชิงอรรถ

1. ข้อมูลจำเพาะ Markdown สไตล์ GitHub https://github.github.com/gfm/ ↩

2. เชิงอรรถ https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields

3. บทความ WeChat ไม่รองรับการกระโดดของสมอและเปิดไฮเปอร์ลิงก์ URL ของบุคคลที่สามดังนั้นพวกเขาจึงไม่รองรับคุณสมบัติเชิงอรรถที่สมบูรณ์

4. ผู้มีส่วนร่วมในการดำเนินการ https://github.com/jaywcjlove/github-action-contributors ↩