python3實現CryptoJS AES加密演算法

阿新 • • 發佈：2020-12-26

技術標籤：es6

es6

es6 變數的宣告方式
let 關鍵字：

宣告的變數是塊級作用域
不允許重複宣告變數
不存在變數提升
for(let i = 0; i < 5; i++){
setTimeout(() =>{
console.log(i)
}, 1000)
}
const 關鍵字：
宣告的是塊級作用域
不允許重複宣告變數
不存在變數提升
宣告的是一個常量(基本資料型別)：本質是存放變數的記憶體地址不允許更改；基本資料型別的資料和地址存放在棧中（存放在一起的），因此變成常量，常量不允許更改；但是對於引用資料型別，棧中存放的是地址（指標），地址指向堆記憶體空間，宣告一個引用資料型別作為常量時，相當於是固定了指標，而不能固定資料

常見面試題： var, let 和const 三者的區別
var 存在變數提升機制， let和const 不存在變數提升
var 允許重複宣告變數， let和const不允許重複宣告變數
var 宣告的變數值可以隨意更改，const 宣告的是常量，不允許更改
var 宣告的變數會產生記憶體洩露，let 和 const 不會
var 宣告的變數是全域性作用域或者區域性作用域， let 和 const宣告的變數是塊級作用域
es5 陣列的遍歷（迭代）方式
以下兩種迴圈方式可以使用 break 和continue 語句
for迴圈
for-in迴圈:可以遍歷陣列，但是他最主要的功能是遍歷物件
————————————————————————————

以下幾種遍歷方式不可以使用 break 和continue 語句
錯誤資訊： Uncaught SyntaxError: Illegal break statement
錯誤資訊： Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
forEach()
map() ：對映，返回是一個新陣列
• map() 的常見面試題： [‘1’,‘2’,‘3’].map(parseInt) 執行的結果： 1 NaN NaN
some() ：返回一個布林值， true: 只要資料中有一個元素滿足條件即可

every()：返回一個布林值， true: 資料中所有的元素滿足條件即可；
reduce(function(acc, value, index){}, initValue) ：累計器；如果提供初始值 initValue；則acc 就是初始值，否則是陣列中的第一個元素
filter() ：過濾器；返回的是一個新的陣列（滿足條件的）
是否使用return語句
• for迴圈，for-in， forEach() 他們三者不需要使用return語句
• map() some() every() reduce() filter() 他們需要藉助於return語句
es6的箭頭函式
使用 => 表示箭頭函式
基本結構
let fun = () => {}
一個引數： () 可以省略
let fun = (x) => {
console.log(x)
}
let fun = x => {
console.log(x)
}
let fun = (x, y) => {
console.log(x, y)
}
返回值是單一的語句： {} 可以省略, 如果返回值是物件，需要新增 ()
let fun = x => x * x
let fun = () => ({
name:‘tom’,
age:18
})
es6的解構賦值
物件解構：按照物件的key(屬性名)進行解構
// 按照預設鍵名進行解構
let {name, age} = {name:;‘tom’, age:18}
console.log(name, age) // tom 18
// 重新定義解構名字
let {name:xm, age:nl} = {name:;‘tom’, age:18}
console.log(xm , nl) // tom , 18
陣列解構 : 按照陣列的順序（索引值）進行解構
let arr = [10, 30, 50];
// let [a] = arr;
let [a, , b] = arr;
// 結合擴充套件運算子進行解構
let [a, …b] = arr; // 正確 …b 擴充套件運算子必須放到最後
let […b, a] = arr; // 錯誤資訊： Rest element must be last element
// 陣列是按照索引值進行解構
let arr = [10, [23, 456]];
// let [a, b, c] = arr; // a => 10 ; b=> [23, 456] c===> undefined
let [a, [b, c]] = arr; // a => 10 ; b=> 23 c===> 456
console.log(a);
console.log(b);
console.log©;
擴充套件運算子的應用
• 通過擴充套件運算子實現一維陣列的深拷貝
let arr = [10, 30, 540];
let […a] = arr;
console.log(a);
a[0] = ‘hello’;
console.log(arr);
• 通過擴充套件運算子實現陣列的合併
let arr = [10, 20],
arr2 = [30, 50];
let res = […arr, …arr2]
console.log(res);
• 通過擴充套件運算子求陣列中的最大值和最小值
let arr = [10, 320, 546, 23];
// // let max = Math.max(…arr); // 原理是對陣列進行解構為單一的值作為max()的引數
// // let min = Math.min(…arr); //
let max = Math.max.apply(null, arr) // 原理利用函式物件的 apply() 方法呼叫執行Math.max() 方法並傳參 (apply方法接受陣列作為引數)
let min = Math.min.apply(null, arr)
// console.log(max, min);
函式引數解構和預設值
通常情況下，定義了預設值的引數，應該是函式的尾引數;如果非尾部的引數設定預設值，實際上這個引數是沒法省略的。
// 為函式的引數設定預設值，即直接寫在引數定義的後面
function fun(x, y = 100){console.log(x, y)}
fun(100) // x =>100 y=>100
fun(100, 200) // x =>100 y=>200
// 使用引數預設值時，函式不能有同名引數。
function fun(x, x, y = 100){} // 報錯
// 引數預設值可以與解構賦值的預設值，結合起來使用。
function foo({x, y = 5}) {
console.log(x, y);
}
fun({}) // undefined 5
fun({x:100}) // 100 5
fun({x:100, y:300}) // 100 300
fun() // 報錯
//
es6的類和繼承
通過class 定義類
class Person{
// 定義一個構造器，相當於我們之前講的建構函式私有的屬性
constructor(name, age){
this.name = name;
this.age = age;
}
// 定義公有的方法新增到原型物件上
study(){
console.log(‘學習’)
}
say(){
console.log(‘hello’ + this.name)
}
}
通過 extends 繼承； super()關鍵字繼承父類私有的屬性
class Student extends Person{
// 定義一個構造器，相當於我們之前講的建構函式私有的屬性
constructor(name, age, grade){
super(name, age);
this.grade = grade;
}
// 定義公有的方法新增到原型物件上
study(){
console.log(‘自己學習’)
}
}
Symbol() 資料型別
Symbol()提供了一個獨一無二的值，是一個基本資料型別；可以接受一個引數：用來區分
let count1 = Symbol(‘c1’)
let count2 = Symbol(‘c2’)
// 解決的問題：對庫（物件）進行擴充套件，又不用擔心和庫（物件）中的屬性名衝突
let obj = {
name:‘tom’,
age:18,
count(){
console.log(‘統計計數’)
}
}
// 藉助Symbol()型別
let count = Symbol();
// 把 count 作為 obj 的屬性需要使用 []
obj[count] = function(){
console.log(‘擴充套件obj’)
}
// 呼叫物件中的 Symbol() 建立的count 的方法
obj.count() // 呼叫物件自身的
objcount; // 呼叫物件中的 Symbol() 建立的count 的方法
遍歷Symbol()屬性名：Symbol 作為屬性名，遍歷物件的時候
通過 Obejct.getOwnPropertySymbols() 遍歷，得到的是所有的Symbol() 屬性名；常規的屬性名是獲取不到的
通過 Reflect.ownKeys() 方法遍歷物件的所有屬性名（常規和Symbol()的）
Set() 資料結構
set()是一個新的資料型別，類似於陣列，但是不能通過下標取值；set()值不允許重複
宣告set() 資料型別
let set = new Set() // Set() 是一個建構函式空的set()
let set = new Set([1, 1, 1, 2, 3, 5]) // 引數是陣列，要求值不能重複; 自動去重
通過set() 的特性實現陣列去重
let arr1 = [1, 1, 1, 1, 2, 3]
let arr = […new Set(arr1)]
set() 資料的操作
• add() : 新增
• delete() ：刪除；返回值是布林值 true：刪除成功。 false:刪除失敗
• clear() ：清空
• has() ：判斷是否存在某個值；返回值布林值 true:存在 false:不存在
set() 進行遍歷 : 由於 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致。
• keys() : 返回鍵名的遍歷器
• values() : 返回鍵值的遍歷器
• entries() ：返回鍵值對的遍歷器
• forEach() ：使用回撥函式遍歷每個成員（類似陣列中的forEach()）
for-of 遍歷：遍歷部署了 [Symbol.iterator] 屬性的資料
原生具有iterator介面的資料型別：
• Array
• Map
• Set
• String
• TypedArray
• 函式的 arguments 物件
• NodeList 物件
自定義物件不存在該介面的，不能使用for-of遍歷；如果要使用for-of遍歷自定義物件，需要自己部署介面
Iterator迭代器（介面）
一是為各種資料結構，提供一個統一的、簡便的訪問介面；
是一個函式
Iterator 介面主要供for…of消費
（原理）每一次呼叫next方法，都會返回資料結構的當前成員的資訊。具體來說，就是返回一個包含value和done兩個屬性的物件。其中，value屬性是當前成員的值，done屬性是一個布林值，表示遍歷是否結束。（false:意味著遍歷沒有結束； true:意味著遍歷結束了， value屬性的值是undefined）
自定義物件部署Iterator介面
let obj = {
name:‘tom’,
age:19,
say:‘hello’,
sleep:‘睡覺’,
[Symbol.iterator]: function(){
let index = 0; // 模擬指標移動
let key = null; // 儲存鍵
let self = this; // 儲存this
return {
next: function(){
if(key == null){
// key 是儲存所有的鍵名是一個數組
key = Object.keys(self)
}
return {
value:self[key[index]],
done:++index > key.length
}
}
}
}
}
// 沒有部署之前報錯： obj is not iterable (obj 不可迭代的)
// for(let key of obj){
// console.log(key);
// }
// 執行的過程
let iterator = objSymbol.iterator;
let res1 = iterator.next();
let res2 = iterator.next();
let res3 = iterator.next();
let res4 = iterator.next();
let res5 = iterator.next();
console.log(res1); // {value:tom, done:false}
console.log(res2); // {value:, done:false}
console.log(res3);
console.log(res4);
console.log(res5);
Object.keys() 方法獲取物件屬性名的集合（結果是屬性名組成的陣列）(獲取的是物件常規的屬性名，不包含Symbol()型別)
Map 資料結構
Map 是es6新增的資料結構；儲存的是鍵值對，但是鍵不侷限於字串，可以是任意型別
宣告方式
let map = new Map() // 宣告一個空的map結構
// 陣列作為引數
let map = new Map([[10, ‘hello’], [20,‘world’]])
// 使用物件作為引數藉助set()方法實現
let o = {name:‘tom’}
let map = new Map()
map.set(o, ‘姜子牙’)
// 可以使用Set() 資料結構作為引數
const set = new Set([
[‘foo’, 1],
[‘bar’, 2]
]);
const m1 = new Map(set);
m1.get(‘foo’)
Map()的資料操作
• set(key, value) : 設定鍵和值
• delete(key) ：刪除鍵值對；結果是布林值， true: 刪除成功， false：刪除失敗
• has(key) ：判斷是否存在指定的鍵結果布林值； true：存在； false：不存在
• clear() ：清空
• get(key) : 獲取值，引數是鍵名
Map() 的遍歷方式
• keys() : 返回鍵名的遍歷器。
• values() : 返回鍵值的遍歷器。
• entries() ：返回鍵值對的遍歷器。
• forEach() ：遍歷 Map 的所有成員 ;類似陣列的forEach()
Promise() 物件
回撥地獄：在使用JavaScript時，為了實現某些邏輯經常會寫出層層巢狀的回撥函式，如果巢狀過多，會極大影響程式碼可讀性和邏輯，這種情況也被成為回撥地獄
通過 Promise() 解決回撥地獄
Promise() 基本實現流程（執行機制）
Promise物件是一個建構函式，用來生成Promise例項。
promise 的作用：Promise物件，可以將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式。此外，Promise物件提供統一的介面，使得控制非同步操作更加容易。
promise 接受一個函式作為引數：函式有兩個引數： resolve(成功) reject(失敗); 他們兩個是函式，由 JavaScript 引擎提供，不用自己部署。
Resolve函式的作用是，將Promise物件的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在非同步操作成功時呼叫，並將非同步操作的結果，作為引數傳遞出去；
Reject函式的作用是，將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在非同步操作失敗時呼叫，並將非同步操作報出的錯誤，作為引數傳遞出去。
promise 的狀態：有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。
Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。當處於pending狀態時，無法得知目前進展到哪一個階段
Promise() （承諾）基本程式碼邏輯
let flag = true;
function fun(){
return new Promise( (resolve, reject) =>{
if(flag){
// resolve() 代表成功， resolve() 呼叫執行 then() 中的回撥函式
// resolve()
// 引數 result 就是傳遞的資料需要通過then() 中回撥函式接受
resolve(result)
}else{
// reject() 代表失敗， reject() 呼叫執行 catch() 中的回撥函式
// reject()
// 引數 error 就是傳遞的錯誤資訊需要通過catch() 中回撥函式接受
reject(error)
}
})
}
// fun().then(() => {}).catch(() => {})
fun().then((data) => {}).catch((err) => {})
async 函式和 await
async: async函式返回一個 Promise 物件，可以使用then方法添加回調函式。當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句。
async 和 await 的使用： await必須在 async函式內部使用， await命令後是一個 promise()物件
async函式返回一個 Promise 物件。
// 簡單用法：
async function fun(){
await new Promise((resolve, reject) => {
})
}
//
async function fun2(){
await fun3();
await fun4();
// async 函式內部使用 return 語句傳遞資料
return ‘hello’
}
async function fun3(){

}
async function fun4(){

}
fun2().then((data) => {
console.log(data)
})
async 和await 的異常捕獲
通過 try-catch語句捕獲異常
async function fun() {
try {
await new Promise((resolve, reject) => {
reject(‘執行失敗’);
});
} catch (err) {
console.log(‘捕獲異常’+err)
}
}
fun();
巨集任務和微任務

巨集任務：整體的JavaScript程式碼， setTimeout, setInterval
微任務： Promise, process.nextTick(nodejs的方法) ; process.nextTick 優先於 promise 執行
事件迴圈機制：
巨集任務和微任務執行機制（微任務先執行，巨集任務後執行）
執行遇到await 命令，會讓出執行緒，執行完所有的
Object.defineProperty()：資料攔截（資料劫持）
方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件。
基本用法:
// Object.defineProperty(obj, prop, descriptor)
/*

obj: 要定義屬性的物件 (監聽的物件)
prop: 要定義或修改的屬性的名稱或 Symbol 。(監聽的屬性名)
descriptor: 要定義或修改的屬性描述符。 (該描述符是一個物件；對監聽的物件的屬性的具體操作；常用的 set() 和 get() 方法)
/
let obj = {
name:‘tom’
age:18
}
// 需要藉助一箇中間變數實現操作：
let newName = obj.name;
Object.defineProperty(obj, ‘name’, {
get(){
// 獲取/讀取物件的屬性是進行資料攔截（資料劫持）
// 通過 return 語句返回劫持後修改的資料
return 《${newName}》
},
set(value){
// 設定物件的屬性進行攔截
newName = value;
}
})
作用：通過資料劫持可以實現資料的雙向繫結（vue2 框架的資料雙向繫結的原理）
es6 的 Proxy() 代理器
Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫
Proxy() 是一個建構函式
// var proxy = new Proxy(target, handler);
/
target:要使用 Proxy 包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）。（監聽攔截的物件）
handler : 一個通常以函式作為屬性的物件，各屬性中的函式分別定義了在執行各種操作時代理 p 的行為。(監聽物件後進行具體操作)
*/
let obj = {
name:‘tom’,
age:18
}
let p = new Proxy(obj, {
get(target, props){
// target 代理物件 obj
// props 攔截的屬性名
// 通過return語句返回攔截（修改）的資料
return target[props]
},
set(target, props, value){
// target 代理物件 obj
// props 攔截的屬性名
// value 設定的屬性值（新值）
target[props] = value;
}
})
// 後期的操作完全有代理器 p進行
p.name = ‘hello’
es6 的模組
ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範成為瀏覽器和伺服器通用的模組解決方案。

模組匯出方式： export 物件匯出
// 匯出單一模組(匯出的模組可以是任意型別)
export function fun(){}
export function say(){}
export let num = 100;
// 把模組作為整體匯出
function print(){}
let obj = {};
let str = ‘hello’;
export {print, obj, str}
// 匯出預設模組一個檔案中只能有一個預設模組
export default function(){}
// 匯出模組也可以命名別名；引入時通過別名進行引入
function sleep(){}
export {sleep as s}
模組引入方式： import 模組名 from ‘url’
// 引入單一模組
import {fun} from ‘url’
// 引入多個模組
import {fun, say, num} from ‘url’
// 引入預設模組預設模組可以自定義引入的模組名，可以省略 {}
import a from ‘url’
// 整體載入模組使用 * 載入，把引入的模組作為一個物件的屬性 ; 預設模組的屬性名為default
import * as f from ‘url’
// 引入預設模組和普通模組
import a,{fun} from ‘url’
// 引入模組命名別名使用as 關鍵字 ; 後期通過別名 f 操作模組
import {fun as f} from ‘url’
模組模組之間可以相互依賴引入；一個檔案可以引入多個模組，一個模組可以引入多個檔案

新的改變

我們對Markdown編輯器進行了一些功能拓展與語法支援，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

全新的介面設計 ，將會帶來全新的寫作體驗；
在創作中心設定你喜愛的程式碼高亮樣式，Markdown 將程式碼片顯示選擇的高亮樣式 進行展示；
增加了 圖片拖拽 功能，你可以將本地的圖片直接拖拽到編輯區域直接展示；
全新的 KaTeX數學公式 語法；
增加了支援甘特圖的mermaid語法¹ 功能；
增加了 多螢幕編輯 Markdown文章功能；
增加了 焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定 等功能，功能按鈕位於編輯區域與預覽區域中間；
增加了 檢查列表 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜體：Ctrl/Command + I
標題：Ctrl/Command + Shift + H
無序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
檢查列表：Ctrl/Command + Shift + C
插入程式碼：Ctrl/Command + Shift + K
插入連結：Ctrl/Command + Shift + L
插入圖片：Ctrl/Command + Shift + G
查詢：Ctrl/Command + F
替換：Ctrl/Command + G

合理的建立標題，有助於目錄的生成

直接輸入1次#，並按下space後，將生成1級標題。
輸入2次#，並按下space後，將生成2級標題。
以此類推，我們支援6級標題。有助於使用TOC語法後生成一個完美的目錄。

如何改變文字的樣式

強調文字 強調文字

加粗文字 加粗文字

標記文字

~~刪除文字~~

引用文字

H₂O is是液體。

2¹⁰ 運算結果是 1024.

插入連結與圖片

連結: link.

圖片: ![Alt]1. 概念： ASynchronous JavaScript And XML 非同步的JavaScript 和 XML
同步鎖:加鎖 synchronized:防止執行緒不安全,好處:執行緒安全壞處:訪問速度變慢
1. 非同步和同步：客戶端和伺服器端相互通訊的基礎上
*同步: 客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
*非同步: 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。

	Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 
	[無重新整理情況下展示新內容的這樣一種技術]==>提升了使用者體驗
	通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
	傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

	提升使用者的體驗,減輕了伺服器端壓力,達到無重新整理頁面效果;

實現方式：
1. 原生的JS實現方式（瞭解)===>Jquery是javascript程式碼的封裝,jquery底層考慮了相容性的問題;
  //1.建立核心物件
  var xmlhttp;
  if (window.XMLHttpRequest)
  //瀏覽器的相容性
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();//核心物件非同步引擎
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
  }
```
     //2. 建立連線
     /*
         引數：
             1. 請求方式：GET、POST
                 * get方式，請求引數在URL後邊拼接。send方法為空參
                 * post方式，請求引數在send方法中定義
             2. 請求的URL：
             3. 同步或非同步請求：true（非同步）或 false（同步）

      */
     xmlhttp.open("GET","ajaxServlet?username=tom",true);

     //3.傳送請求
     xmlhttp.send();
     //404 406 500  200  200 2 201   500 伺服器內部錯誤
     //4.接受並處理來自伺服器的響應結果
     //獲取方式 ：xmlhttp.responseText
     //什麼時候獲取？當伺服器響應成功後再獲取

     //當xmlhttp物件的就緒狀態改變時，自動觸發事件onreadystatechange。
     xmlhttp.onreadystatechange=function()
     {
         //判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            //獲取伺服器的響應結果
             var responseText = xmlhttp.responseText;
             alert(responseText);
         }
     }
```
2. JQeury實現方式
  1. $.ajax()
    - 語法： . a j a x ( 鍵值對 ) ; / / 使用 .ajax({鍵值對}); //使用 .ajax(鍵值對);//使用.ajax()傳送非同步請求
      $.ajax({
      url:“ajaxServlet1111” , // 請求路徑
      type:“POST” , //請求方式
      //data: “username=jack&age=23”,//請求引數
      data:{“username”:“jack”,“age”:23},
      success:function (data) {
      alert(data);
      },//響應成功後的回撥函式
      error:function () {
      alert(“出錯啦…”)
      },//表示如果請求響應出現錯誤，會執行的回撥函式
```
  dataType:"text"//設定接受到的響應資料的格式
```
      });
  2. $.get()：傳送get請求
    - 語法：$.get(url, [data], [callback], [type])
      - 引數：
        url：請求路徑
        data：請求引數
        callback：回撥函式
        type：響應結果的型別
  3. $.post()：傳送post請求
    - 語法：$.post(url, [data], [callback], [type])
      - 引數：
        url：請求路徑
        data：請求引數
        callback：回撥函式
        type：響應結果的型別
        (https://img.796t.com/res/2020/10-17/10/6cdf2ebb3e39d1e47b8dd74cfdddbb06.gif)

帶尺寸的圖片: Alt

居中的圖片: Alt

居中並且帶尺寸的圖片: Alt

當然，我們為了讓使用者更加便捷，我們增加了圖片拖拽功能。

如何插入一段漂亮的程式碼片

去部落格設定頁面，選擇一款你喜歡的程式碼片高亮樣式，下面展示同樣高亮的 程式碼片.

// An highlighted block
var foo = 'bar';

生成一個適合你的列表

專案
- 專案
  - 專案

專案1
專案2
專案3

計劃任務
完成任務

建立一個表格

一個簡單的表格是這麼建立的：

專案	Value
電腦	$1600
手機	$12
導管	$1

設定內容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文字居中	第二列文字居右	第三列文字居左

SmartyPants

SmartyPants將ASCII標點字元轉換為“智慧”印刷標點HTML實體。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

建立一個自定義列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何建立一個註腳

一個具有註腳的文字。²

註釋也是必不可少的

Markdown將文字轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表示式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通過尤拉積分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.

你可以找到更多關於的資訊 LaTeX 數學表示式here.

新的甘特圖功能，豐富你的文章

關於 甘特圖 語法，參考這兒,

UML 圖表

可以使用UML圖表進行渲染。 Mermaid. 例如下面產生的一個序列圖：

這將產生一個流程圖。:

關於 Mermaid 語法，參考這兒,

FLowchart流程圖

我們依舊會支援flowchart的流程圖：

關於 Flowchart流程圖 語法，參考這兒.

匯出與匯入

匯出

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到 文章匯出 ，生成一個.md檔案或者.html檔案進行本地儲存。

匯入

如果你想載入一篇你寫過的.md檔案，在上方工具欄可以選擇匯入功能進行對應副檔名的檔案匯入，
繼續你的創作。

mermaid語法說明 ↩︎
註腳的解釋 ↩︎