Showdown เป็น JavaScript Markdown ไปยัง HTML Converter ซึ่งขึ้นอยู่กับผลงานต้นฉบับของ John Gruber Showdown สามารถใช้ฝั่งไคลเอ็นต์ (ในเบราว์เซอร์) หรือฝั่งเซิร์ฟเวอร์ (ด้วย node.js)
ตรวจสอบตัวอย่างสดที่นี่: http://demo.showdownjs.com/
อย่างที่คุณทราบ ShowdownJS เป็นห้องสมุดฟรีและจะยังคงเป็นอิสระตลอดไป อย่างไรก็ตามการบำรุงรักษาและปรับปรุงค่าใช้จ่ายและเงินของห้องสมุด
หากคุณชอบงานของเราและพบว่าห้องสมุดของเรามีประโยชน์โปรดบริจาคผ่าน PayPal! การบริจาคของคุณจะได้รับการชื่นชมอย่างมากและช่วยให้ฉันพัฒนาห้องสมุดที่ยอดเยี่ยมนี้ต่อไป
Showdownjs V 2.0 เปิดตัวภายใต้ใบอนุญาต MIT เวอร์ชันก่อนหน้านี้ได้รับการปล่อยตัวภายใต้ BSD
คุณสามารถดาวน์โหลด Tarball รุ่นล่าสุดได้โดยตรงจากรุ่น
bower install showdown
npm install showdown
PM> Install-Package showdownjs
แพ็คเกจ NuGet สามารถพบได้ที่นี่
นอกจากนี้คุณยังสามารถใช้หนึ่งใน CDNs หลายแห่งที่มีอยู่:
jsdelivr
https://cdn.jsdelivr.net/npm/showdown@<version tag>/dist/showdown.min.js
cdnjs
https://cdnjs.cloudflare.com/ajax/libs/showdown/<version tag>/showdown.min.js
UNPKG
https://unpkg.com/showdown/dist/showdown.min.js
หมายเหตุ : แทนที่ <version tag>
ด้วยเวอร์ชันเต็มความยาวจริงที่คุณสนใจในเช่น 1.9.0
การประลองได้รับการทดสอบสำเร็จด้วย:
ในทางทฤษฎีการประลองจะทำงานในเบราว์เซอร์ใด ๆ ที่รองรับ ECMA 262 รุ่นที่ 3 (JavaScript 1.5) ตัวแปลงเองอาจทำงานในสิ่งที่ไม่ใช่เว็บเบราว์เซอร์เช่นกายกรรม ไม่มีสัญญา
Showdown มีจุดประสงค์เพื่อทำงานกับรุ่น Node.js ที่รองรับ (ดูกำหนดการเปิดตัว node.js รหัสอาจใช้งานได้กับ Node.js รุ่นก่อนหน้า แต่ไม่มีการให้บริการเพื่อให้แน่ใจว่าเป็นเช่นนั้น
หากคุณกำลังมองหา Showdown V <1.0.0 คุณสามารถค้นหาได้ใน สาขามรดก
คุณสามารถตรวจสอบการเปลี่ยนแปลงเต็มรูปแบบ
ตรวจสอบหน้าวิกิของเราสำหรับตัวอย่างและเอกสารเชิงลึกเพิ่มเติม
var showdown = require ( 'showdown' ) ,
converter = new showdown . Converter ( ) ,
text = '# hello, markdown!' ,
html = converter . makeHtml ( text ) ;
var converter = new showdown . Converter ( ) ,
text = '# hello, markdown!' ,
html = converter . makeHtml ( text ) ;
ตัวอย่างทั้งสองควรส่งออก ...
< h1 id =" hellomarkdown " > hello, markdown! </ h1 >
คุณสามารถเปลี่ยนพฤติกรรมเริ่มต้นของ Showdown ได้ผ่านตัวเลือก
สามารถตั้งค่าตัวเลือก:
การตั้งค่าตัวเลือก "ทั่วโลก" มีผลต่อทุกกรณีของการเปิดตัว
showdown . setOption ( 'optionKey' , 'value' ) ;
การตั้งค่าตัวเลือก "ท้องถิ่น" มีผลต่อวัตถุตัวแปลงที่ระบุเท่านั้น สามารถตั้งค่าตัวเลือกท้องถิ่น:
ผ่านตัวสร้าง
var converter = new showdown . Converter ( { optionKey : 'value' } ) ;
ผ่านวิธี setOption ()
var converter = new showdown . Converter ( ) ;
converter . setOption ( 'optionKey' , 'value' ) ;
Showdown มีวิธีการ 2 วิธี (ทั้งในท้องถิ่นและระดับโลก) เพื่อดึงตัวเลือกชุดก่อนหน้า
// Global
var myOption = showdown . getOption ( 'optionKey' ) ;
//Local
var myOption = converter . getOption ( 'optionKey' ) ;
// Global
var showdownGlobalOptions = showdown . getOptions ( ) ;
//Local
var thisConverterSpecificOptions = converter . getOptions ( ) ;
คุณสามารถรับตัวเลือกเริ่มต้นของ Showdown ด้วย:
var defaultOptions = showdown . getDefaultOptions ( ) ;
OmitextrawlEncodeBlocks : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ละเว้นการติดตามใหม่ในบล็อกรหัส อดีต:
นี้:
< code > < pre > var foo = 'bar';
</ pre > </ code >
กลายเป็นสิ่งนี้:
< code > < pre > var foo = 'bar'; </ pre > </ code >
NOHEADERID : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ปิดการใช้งานการสร้าง ID ส่วนหัวอัตโนมัติ การตั้งค่าเป็น คำนำหน้า การแทนที่จริง
CustomizedHeaderId : (บูลีน) [เริ่มต้นเท็จ] ใช้ข้อความในการจัดฟันแบบหยิกเป็น ID ส่วนหัว (ตั้งแต่ v1.7.0) ตัวอย่าง:
## Sample header {real-id} will use real-id as id
ghcompatibleHeaderId : (บูลีน) [ค่าเริ่มต้นเท็จ] สร้าง ID ส่วนหัวที่เข้ากันได้กับสไตล์ gitHub (ช่องว่างถูกแทนที่ด้วยขีดกลางและกลุ่มของตัวอักษรและตัวเลขที่ไม่ใช่ตัวอักษรที่ไม่ได้ถูกลบออก) (ตั้งแต่ v1.5.5)
PrefixHeaderId : (สตริง/บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] เพิ่มคำนำหน้าลงใน ID ส่วนหัวที่สร้างขึ้น การผ่านสตริงจะนำหน้าสตริงนั้นไปยัง ID ส่วนหัว การตั้งค่าเป็น true
จะเพิ่มคำนำหน้า 'ส่วน' ทั่วไป '
RAWPREFIXHEADERID : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] การตั้งค่าตัวเลือกนี้เป็นจริงจะป้องกันไม่ให้การประลองจากการแก้ไขคำนำหน้า สิ่งนี้อาจส่งผลให้ ID ที่ไม่ถูกต้อง (ถ้าตัวอย่างเช่น "ถ่านถูกใช้ในคำนำหน้า) ไม่มีผลถ้าตั้งค่าคำนำหน้าเป็นเท็จ (ตั้งแต่ v 1.7.3)
RawHeaderId : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ลบเฉพาะช่องว่าง 'และ "จาก ID ส่วนหัวที่สร้างขึ้น (รวมถึงคำนำหน้า) แทนที่ด้วยเส้นประ (-) คำเตือน: สิ่งนี้อาจส่งผลให้ ID ที่ไม่ถูกต้อง (ตั้งแต่ v1.7.3)
HeaderLevelStart : (จำนวนเต็ม) [ค่าเริ่มต้น 1] ตั้งค่าระดับเริ่มต้นส่วนหัว ตัวอย่างเช่นการตั้งค่าสิ่งนี้เป็น 3 หมายความว่า
# foo
จะถูกแยกวิเคราะห์เป็น
< h3 > foo </ h3 >
ParseimGDimensions : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] เปิดใช้งานการสนับสนุนสำหรับการตั้งค่าขนาดภาพจากภายในมาร์คดาวน์ไวยากรณ์ ตัวอย่าง:
 simple, assumes units are in px
 sets the height to "auto"
 Image with width of 80% and height of 5em
SimplifiedAutolink : (บูลีน) [ค่าเริ่มต้นเท็จ] การเปิดตัวเลือกนี้จะเปิดใช้งานการเชื่อมโยงอัตโนมัติไปยัง URL ซึ่งหมายความว่า:
some text www.google.com
จะถูกแยกวิเคราะห์เป็น
< p > some text < a href =" www.google.com " > www.google.com </ a >
ExpludetrailingPunctuation Fromurls: (บูลีน) [ค่าเริ่มต้นเท็จ] ตัวเลือกนี้ไม่รวมเครื่องหมายวรรคตอนต่อท้ายจาก URL Autolinking เครื่องหมายวรรคตอนไม่รวม: . ! ? ( )
. ใช้เฉพาะในกรณีที่ตัวเลือก SimplifiedAutolink ถูกตั้งค่าเป็น true
LiteralMidWordunderscores : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] การเปิดสิ่งนี้จะหยุดการประลองจากการตีความขีดความสามารถในช่วงกลางของคำว่า <em>
และ <strong>
และปฏิบัติต่อพวกเขาแทนตัวอักษร
ตัวอย่าง:
some text with __ underscores __ in middle
จะถูกแยกวิเคราะห์เป็น
< p > some text with__underscores__in middle </ p >
LiteralMidWordasterisks : (บูลีน) [ค่าเริ่มต้นเท็จ] การเปิดสิ่งนี้จะหยุดการประลองจากการตีความเครื่องหมายดอกจันในช่วงกลางของคำว่า <em>
และ <strong>
และแทนพวกเขาเป็นเครื่องหมายดอกจันตัวอักษรแทน
Strikethrough : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] เปิดใช้งานการสนับสนุนสำหรับไวยากรณ์ Strikethrough ~~strikethrough~~
AS <del>strikethrough</del>
ตาราง : (บูลีน) [เริ่มต้นเท็จ] เปิดใช้งานการสนับสนุนสำหรับไวยากรณ์ของตาราง ตัวอย่าง:
| h1 | h2 | h3 |
| :------ | :-------: | --------: |
| 100 | [ a ] [ 1 ] | ![ b ] [ 2 ] |
| * foo * | ** bar ** | ~~ baz ~~ |
ดู Wiki สำหรับข้อมูลเพิ่มเติม
TableSheAderId : (บูลีน) [ค่าเริ่มต้นเท็จ] หากเปิดใช้งานเพิ่มคุณสมบัติ ID ไปยังแท็กส่วนหัวของตาราง
GHCODEBLOCKS : (บูลีน) [ค่าเริ่มต้นจริง] เปิดใช้งานการสนับสนุนสำหรับรูปแบบบล็อกรหัส GFM
TaskLists : (บูลีน) [ค่าเริ่มต้นที่เป็นเท็จ] เปิดใช้งานการสนับสนุนสำหรับรายการงาน GFM ตัวอย่าง:
- [x] This task is done
- [ ] This is still pending
SmoothLivePreview : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ป้องกันเอฟเฟกต์แปลก ๆ ในตัวอย่างสดเนื่องจากอินพุตที่ไม่สมบูรณ์
SmartIndentationFix : (บูลีน) [ค่าเริ่มต้นเท็จ] พยายามแก้ไขปัญหาการเยื้องอย่างชาญฉลาดที่เกี่ยวข้องกับสตริงเทมเพลต ES6 ในระหว่างรหัสเยื้อง
DisableForced4SpacesIndentsublists : (บูลีน) [ค่าเริ่มต้นเท็จ] ปิดการใช้งานข้อกำหนดของการเยื้อง sublists โดย 4 ช่องว่างสำหรับพวกเขาที่จะซ้อนกันอย่างมีประสิทธิภาพกลับสู่พฤติกรรมเก่าที่พื้นที่ 2 หรือ 3 เพียงพอ (ตั้งแต่ v1.5.0)
SimpleLineBreaks : (บูลีน) [ค่าเริ่มต้นเท็จ] พาร์ทไลน์แบ่งเป็น <br>
โดยไม่ต้องใช้ 2 ช่องว่างในตอนท้ายของบรรทัด (ตั้งแต่ v1.5.1)
a line
wrapped in two
เปลี่ยนเป็น:
< p > a line < br >
wrapped in two </ p >
ต้องใช้ ebedheadheadingText : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ทำให้การเพิ่มช่องว่างระหว่าง #
และข้อความส่วนหัวบังคับ (ตั้งแต่ v1.5.3)
Ghmentions : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] เปิดใช้งาน gitHub @mentions ซึ่งเชื่อมโยงไปยังชื่อผู้ใช้ที่กล่าวถึง (ตั้งแต่ v1.6.0)
GhmentionsLink : (String) [เริ่มต้น https://github.com/{u}
] เปลี่ยนลิงก์ที่สร้างโดย @mentions Showdown จะแทนที่ {u}
ด้วยชื่อผู้ใช้ ใช้เฉพาะเมื่อเปิดใช้งานตัวเลือก Ghmentions ตัวอย่าง: @tivie
พร้อม GhmentionsOption ตั้งค่าเป็น //mysite.com/{u}/profile
จะส่งผลให้ <a href="//mysite.com/tivie/profile">@tivie</a>
encodeemails : (บูลีน) [ค่าเริ่มต้นจริง] เปิดใช้งานที่อยู่อีเมลที่เข้ารหัสผ่านการใช้เอนทิตีอักขระเปลี่ยนที่อยู่อีเมล ASCII ให้เป็นหน่วยสืบราชการลับที่เทียบเท่า (ตั้งแต่ v1.6.1)
หมายเหตุ: ก่อนหน้ารุ่น 1.6.1 อีเมลจะทำให้งงงวยตลอดการเข้ารหัสธันวาคมและ Hex
OpenLinkSinNewWindow : (บูลีน) [ค่าเริ่มต้นเท็จ] เปิดลิงก์ทั้งหมดในหน้าต่างใหม่ (โดยการเพิ่มแอตทริบิวต์ target="_blank"
ไปยัง <a>
แท็ก) (ตั้งแต่ v1.7.0)
backslashescapeshtmltags : (บูลีน) [ค่าเริ่มต้นที่เป็นเท็จ] รองรับการหลบหนีแท็ก HTML ตัวอย่าง: <div>foo</div>
(ตั้งแต่ v1.7.2)
Emoji : (บูลีน) [ค่าเริ่มต้นเท็จ] เปิดใช้งานการสนับสนุนอิโมจิ Ex: this is a :smile: emoji
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Emojis ที่มีอยู่ดู https://github.com/showdownjs/showdown/wiki/emojis (ตั้งแต่ v.1.8.0)
ขีดเส้นใต้ : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] คุณลักษณะการทดลองเปิด ใช้งานการสนับสนุนขีดเส้นใต้ ไวยากรณ์เป็น ขีดเส้นใต้ สอง หรือ สาม Ex: __underlined word__
เมื่อเปิดใช้งานตัวเลือกนี้ขีดเส้นใต้จะไม่แยกวิเคราะห์เป็น <em>
และ <strong>
อีกต่อไป
Ellipsis : (บูลีน) [ค่าเริ่มต้นจริง] แทนที่สามจุดด้วยอักขระ Ellipsis unicode
CompleteHtMldocument : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] ส่งออกเอกสาร HTML ที่สมบูรณ์รวมถึง <html>
, <head>
และ <body>
แท็ก 'แทนชิ้นส่วน HTML (ตั้งแต่ v.1.8.5)
ข้อมูลเมตา : (บูลีน) [ค่าเริ่มต้นเท็จ] เปิดใช้งานการสนับสนุนสำหรับข้อมูลเมตาเอกสาร (กำหนดไว้ที่ด้านบนของเอกสารระหว่าง «««
และ »»»
หรือระหว่าง ---
และ ---
) (ตั้งแต่ v.1.8.5)
var conv = new showdown . Converter ( { metadata : true } ) ;
var html = conv . makeHtml ( someMd ) ;
var metadata = conv . getMetadata ( ) ; // returns an object with the document metadata
Splitadjacentblockquotes : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] Split Blockquote ที่อยู่ติดกัน (ตั้งแต่ V.1.8.6)
Morestyling : (บูลีน) [ค่าเริ่มต้นที่ผิดพลาด] เพิ่มคลาสที่มีประโยชน์สำหรับการออกแบบ CSS (ตั้งแต่ v2.0.1)
task-list-item-complete
ให้กับรายการงานที่เสร็จสมบูรณ์ในรายการงาน GFMหมายเหตุ : โปรดทราบว่าจนถึง เวอร์ชัน 1.6.0 ตัวเลือกเหล่านี้ทั้งหมดจะ ถูกปิดใช้งาน โดยค่าเริ่มต้นในเครื่องมือ CLI
นอกจากนี้คุณยังสามารถใช้รสชาติหรือที่ตั้งไว้ล่วงหน้าเพื่อตั้งค่าตัวเลือกที่ถูกต้องโดยอัตโนมัติเพื่อให้การเปิดตัวทำหน้าที่เหมือนรสชาติที่เป็นที่นิยม
ปัจจุบันมีรสชาติต่อไปนี้:
showdown . setFlavor ( 'github' ) ;
converter . setFlavor ( 'github' ) ;
Showdown ยังมาพร้อมกับเครื่องมืออินเตอร์เฟสบรรทัดคำสั่ง คุณสามารถตรวจสอบหน้า CLI Wiki สำหรับข้อมูลเพิ่มเติม
โครงการ ShowdownJS ยังมีการรวมเข้ากับ AngularJS อย่างราบรื่นผ่าน "ปลั๊กอิน" กรุณาเยี่ยมชม https://github.com/showdownjs/ngshowdown สำหรับข้อมูลเพิ่มเติม
หากคุณใช้ typeScript คุณอาจต้องการใช้ประเภทจากแน่นอน
การรวมเข้ากับ SystemJS สามารถรับได้ผ่านปลั๊กอิน "System-MD" ของบุคคลที่สาม
หากต้องการใช้ ShowdownJs เป็นส่วนประกอบ Vue ได้อย่างรวดเร็วคุณสามารถตรวจสอบ Vue-Showdown
Showdown ไม่ได้ฆ่าเชื้ออินพุต นี่คือการออกแบบเนื่องจาก Markdown อาศัยมันเพื่อให้คุณสมบัติบางอย่างถูกแยกวิเคราะห์อย่างถูกต้องลงใน HTML อย่างไรก็ตามสิ่งนี้หมายความว่าการฉีด XSS นั้นค่อนข้างเป็นไปได้
โปรดดูช่องโหว่ XSS ของ Wiki Markdown (และวิธีการลดลง) สำหรับข้อมูลเพิ่มเติม
Showdown อนุญาตให้โหลดฟังก์ชั่นเพิ่มเติมผ่านส่วนขยาย (คุณสามารถค้นหารายการส่วนขยายการเปิดตัวที่รู้จักได้ที่นี่) คุณสามารถค้นหาแผ่นหม้อต้มเพื่อสร้างส่วนขยายของคุณเองในที่เก็บนี้
< script src = "showdown.js" / >
< script src = "twitter-extension.js" / >
var converter = new showdown . Converter ( { extensions : [ 'twitter' ] } ) ;
var showdown = require ( 'showdown' ) ,
myExtension = require ( 'myExtension' ) ,
converter = new showdown . Converter ( { extensions : [ 'myExtension' ] } ) ;
การสร้างโคลนของที่เก็บเป็นเรื่องง่าย
ต้องติดตั้ง preerequesites: node.js V12, NPM และ NPX
เรียกใช้ npm install
เรียกใช้ npx grunt build
(ดู Gruntfile.js
) คำสั่งนี้:
dist
มีชุดทดสอบที่ต้องใช้ Node.Js เมื่อติดตั้งโหนดแล้วให้เรียกใช้คำสั่งต่อไปนี้จากรูทโครงการเพื่อติดตั้งการอ้างอิง:
npm install
เมื่อติดตั้งการทดสอบสามารถเรียกใช้จากรูทโครงการโดยใช้:
npm test
สามารถเพิ่มกรณีทดสอบใหม่ได้อย่างง่ายดาย สร้างไฟล์ markdown (ลงท้ายด้วย .md
) ซึ่งมี markdown เพื่อทดสอบ สร้างไฟล์ .html
ที่มีชื่อเดียวกัน มันจะถูกทดสอบโดยอัตโนมัติเมื่อทำการทดสอบด้วย mocha
หากคุณต้องการมีส่วนร่วมโปรดอ่านคู่มือด่วนต่อไปนี้
คุณสามารถขอคุณสมบัติใหม่โดยส่งปัญหา หากคุณต้องการใช้ฟีเจอร์ใหม่อย่าลังเลที่จะออกคำขอดึง
PRS นั้นยอดเยี่ยม อย่างไรก็ตามก่อนที่คุณจะส่งคำขอดึงของคุณให้พิจารณาแนวทางต่อไปนี้:
ค้นหา GitHub สำหรับคำขอดึงแบบเปิดหรือปิดที่เกี่ยวข้องกับการส่งของคุณ คุณไม่ต้องการทำซ้ำ
เมื่อออก PRS ที่เปลี่ยนรหัสให้ทำการเปลี่ยนแปลงในสาขา GIT ใหม่ตาม การพัฒนา :
git checkout -b my-fix-branch develop
เรียกใช้ชุดทดสอบเต็มรูปแบบก่อนส่งและตรวจสอบให้แน่ใจว่าการทดสอบทั้งหมดผ่าน (เห็นได้ชัด = p)
พยายามทำตาม กฎสไตล์การเข้ารหัส ของเรา การทำลายพวกเขาป้องกันไม่ให้ PR ผ่านการทดสอบ
หลีกเลี่ยงการแก้ไขปัญหาหลายอย่างในคำขอดึงเดียวกัน การเปิด PRS ขนาดเล็กหลายตัวแทนที่จะเป็นเรื่องยากที่จะตรวจสอบ Big One
หาก PR แนะนำคุณสมบัติใหม่หรือแก้ไขปัญหา โปรดเพิ่มกรณีทดสอบที่เหมาะสม
เราใช้บันทึกการกระทำทั่วไปเพื่อสร้างการเปลี่ยนแปลงที่เป็นไปตามข้อมูลจำเพาะการเปลี่ยนแปลงทั่วไป มันมีประโยชน์อย่างยิ่งหากข้อความของคุณเป็นไปตามแนวทางการกระทำเหล่านี้
อย่าลืมเพิ่มชื่อของคุณลงในไฟล์เครดิต. md เราชอบที่จะให้เครดิตเป็นครบกำหนด
หากเราแนะนำการเปลี่ยนแปลงแล้ว:
git rebase develop -i
git push origin my-fix-branch -f
หลังจากรวมคำขอดึงของคุณคุณสามารถลบสาขาของคุณได้อย่างปลอดภัย
หากคุณมีเวลามีส่วนร่วมในโครงการนี้เรารู้สึกว่าจำเป็นต้องได้รับเครดิต กฎเหล่านี้ช่วยให้เราสามารถตรวจสอบการประชาสัมพันธ์ของคุณได้เร็วขึ้นและจะให้เครดิตที่เหมาะสมในโปรไฟล์ GitHub ของคุณ เราขอขอบคุณล่วงหน้าสำหรับการบริจาคของคุณ!
เรากำลังมองหาสมาชิกเพื่อช่วยรักษา Showdown โปรดดูปัญหานี้เพื่อแสดงความสนใจหรือแสดงความคิดเห็นในบันทึกนี้
รายการเครดิตเต็มรูปแบบที่ https://github.com/showdownjs/showdown/blob/master/credits.md
การประลองขับเคลื่อนโดย: