Có được những hiểu biết hữu ích và nâng cao kiến ​​thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 1.400 nhà phát triển đăng ký

Cài đặt Turndown từ NPM

Để bắt đầu với Turndown, chúng ta có thể cài đặt nó từ NPM bằng lệnh này

npm i turndown

Sau khi cài đặt, chúng tôi sẽ có thể nhập nó vào một mô-đun JavaScript, như thế này

import TurndownService from 'turndown';

Đối với mô-đun Common JS, thay vào đó, chúng tôi sẽ nhập nó như thế này

const TurndownService = require('turndown');

Bây giờ chúng ta có thể sử dụng mô-đun

import TurndownService from 'turndown';

import TurndownService from 'turndown';

const html = `
Learn Web Development
Check out Coding Beauty for some great tutorials!
`;

// Create an instance of the Turndown service
const turndownService = new TurndownService();

const markdown = turndownService.turndown(html);

console.log(markdown);

Mã này sẽ có đầu ra sau

Learn Web Development
=====================

Check out [Coding Beauty](https://codingbeautydev.com/blog) for some great tutorials!

Sử dụng Turndown trong trình duyệt Với ​​thẻ tập lệnh

Chúng tôi cũng có thể sử dụng Turndown trong trình duyệt bằng cách nhập tập lệnh Turndown bằng thẻ

import TurndownService from 'turndown';

Sau khi bao gồm tập lệnh, chúng tôi sẽ có thể chuyển đổi HTML sang Markdown dễ dàng như chúng tôi đã làm trong ví dụ mã trước đó

Trong trình duyệt, chúng tôi cũng có thể chuyển các nút DOM làm đầu vào cho Turndown

// convert document  to Markdown
const bodyMarkdown = turndownService.turndown(document.body);

// convert first 
 tag to Markdown
const divMarkdown = turndownService.turndown(document.body);

Chuyển quyền chọn sang Turndown

Chúng tôi có thể chuyển các tùy chọn cho Turndown để tùy chỉnh cách chuyển đổi chuỗi HTML thành Markdown. Các tùy chọn có thể được chỉ định trong hàm tạo khi tạo một phiên bản mới của dịch vụ Turndown

Ví dụ

import TurndownService from 'turndown';

const html = `

HTML
CSS
JavaScript
`;

// Specifying options when creating an instance of the
// Turndown service
const turndownService = new TurndownService({ bulletListMarker: '-' });

const markdown = turndownService.turndown(html);

console.log(markdown);

Ở đây, chúng tôi sử dụng thuộc tính

import TurndownService from 'turndown';

import TurndownService from 'turndown';

-   HTML
-   CSS
-   JavaScript

import TurndownService from 'turndown';

import TurndownService from 'turndown';

import TurndownService from 'turndown';

Điều này sẽ tạo ra đầu ra sau

import TurndownService from 'turndown';

11 Tính năng JavaScript mới tuyệt vời trong ES13

Hướng dẫn này sẽ giúp bạn cập nhật tất cả các tính năng mới nhất được thêm vào trong ECMAScript 13. Những tính năng mới mạnh mẽ này sẽ hiện đại hóa JavaScript của bạn bằng mã ngắn hơn và biểu cảm hơn

Đăng ký và nhận ngay một bản sao miễn phí

Ayibatari Ibaba

Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở

Không giống như tên ngụ ý, Markdown là ngôn ngữ đánh dấu có thể được sử dụng để tạo đầu ra văn bản có định dạng trong khi soạn thảo nội dung trong trình soạn thảo văn bản thuần túy mà không cần định dạng. Giống như HTML, Markdown bao gồm một cú pháp cơ bản, tuy nhiên không có đặc điểm kỹ thuật chính thức nào cho Markdown, giống như HTML. Kết quả là có nhiều biến thể Markdown, với mỗi biến thể cung cấp các biến thể cú pháp và thông số kỹ thuật riêng.

Mặc dù có một số khác biệt giữa các hương vị của Markdown, nhưng một khía cạnh khá thú vị của việc soạn thảo nội dung với Markdown là nó có thể dễ dàng chuyển đổi sang HTML bằng cách sử dụng một trong nhiều công nghệ xử lý đánh dấu có sẵn. Một cách có thể tạo thuận lợi cho việc tạo các tệp HTML của trang web, trong khi vẫn là tác giả nội dung trong Markdown, là sử dụng Node. js để chuyển đổi nội dung Markdown thành tệp HTML. Sau đó, đầu ra HTML thu được có thể được tải lên dịch vụ lưu trữ trang web Jamstack, sử dụng các tệp HTML tĩnh

Trong bài đăng này, chúng tôi sẽ sử dụng Node. js và CLI để đọc tệp Markdown, chuyển đổi tệp đó thành chuỗi HTML rồi ghi chuỗi HTML vào tệp mới. Khi chúng tôi đã tạo tệp, chúng tôi có thể khởi động máy chủ phát triển cục bộ để kiểm tra tệp trong trình duyệt web. Trước khi làm theo các bước, hãy đảm bảo có Node. js và npm đã được cài đặt

Thiết lập nút. dự án js CLI

Để bắt đầu, hãy thiết lập gói. json được sử dụng với Node. js bằng cách chạy lệnh npm init trong cửa sổ đầu cuối mở vào thư mục dự án của bạn. Sau đó làm theo lời nhắc được hiển thị bởi quy trình npm init và một gói. tệp json nên đã được tạo. với gói. json tại chỗ, chúng ta có thể chạy các lệnh bổ sung để cài đặt các gói npm được sử dụng để chuyển đổi Markdown sang HTML

cài đặt npm

Trong cùng một cửa sổ đầu cuối chạy lệnh npm install markdown-it highlight. js fs-extra cross-env rimraf @babel/cli @babel/core @babel/preset-env @babel/preset-typescript --save, theo sau là lệnh npm install typescript @types/node @types/markdown-it @

Sau khi chạy cả hai lệnh này, một thư mục mới có tên "node_modules" sẽ có trong thư mục dự án của bạn. Trong thư mục "node_modules", các gói npm sau được cài đặt

• đánh dấu nó
• điểm nổi bật. js

Thêm hỗ trợ cho mô-đun ES

Trong ví dụ này, các gói này cũng được cài đặt, chủ yếu để hỗ trợ sử dụng các mô-đun TypeScript và ES trong Node. js, tùy chọn

• fs-thêm
• bản đánh máy
• chéo env
• rimraf
• @babel/cli
• @babel/lõi
• @babel/preset-env
• @babel/preset-typescript
• @types/fs-thêm
• @types/markdown-it
• @loại/nút

Phần còn lại của các bước này sẽ bao gồm thiết lập trình biên dịch TypeScript và Babel để sử dụng Mô-đun ES trong Node. js cho tập lệnh CLI sẽ chuyển đổi Markdown thành HTML và ghi chuỗi HTML vào một tệp

Để hỗ trợ các mô-đun ES, có thêm một cấu hình phải được bao gồm trong gói. tập tin json. Đây là thuộc tính "loại" với giá trị được đặt thành "mô-đun" như được chỉ ra bên dưới

{
  "type": "module"
}

bưu kiện. Tập lệnh json

Ngoài ra, chúng tôi cần định cấu hình phần "tập lệnh" của gói. json để bao gồm các tập lệnh npm CLI sẽ được sử dụng trong các bước sau. Vì chúng tôi đang sửa đổi gói. json tại thời điểm này, hãy tiếp tục và thêm phần sau vào thuộc tính scripts

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Các tập lệnh này chịu trách nhiệm gọi trình biên dịch TypeScript và Babel, để thực hiện kiểm tra đánh máy và biên dịch TypeScript thành JavaScript. Chúng sử dụng hầu hết các gói tùy chọn đã được cài đặt cho quy trình đó. Trong bước sau, chúng ta có thể chạy các gói này. json dưới dạng các lệnh CLI để biên dịch TypeScript đầu tiên và sau đó chạy đầu ra JavaScript với Node. js để chuyển đổi Markdown thành HTML

bưu kiện. json

Với tất cả các gói cần thiết đã được cài đặt và các mô-đun ES được định cấu hình, gói. json trong dự án của bạn sẽ trông như thế này

{
  "name": "convertmarkdowntohtml",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.9",
    "@babel/preset-typescript": "^7.14.5",
    "cross-env": "^7.0.3",
    "fs-extra": "^10.0.0",
    "highlight.js": "^11.2.0",
    "markdown-it": "^12.2.0",
    "rimraf": "^3.0.2"
  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.12",
    "@types/markdown-it": "^12.0.3",
    "@types/node": "^16.4.10",
    "typescript": "^4.3.5"
  }
}

Nếu bạn gặp sự cố với gói cài đặt, hãy thử sao chép gói. json từ phía trên và lưu nó dưới dạng gói của bạn. json, sau đó chạy lệnh npm install để cài đặt tất cả các gói được liệt kê

Định cấu hình Trình biên dịch TypeScript với tsconfig. json

TypeScript không bắt buộc phải chuyển đổi Markdown sang HTML, nhưng không cần thêm nhiều cấu hình bổ sung khi so sánh với lợi ích của việc sử dụng TypeScript. Vì gói npm cho TypeScript vừa được cài đặt nên chúng ta có thể thêm một tệp mới vào thư mục dự án có tên "tsconfig. json" và phần này sẽ chứa cài đặt cấu hình trình biên dịch TypeScript được khuyến nghị khi sử dụng TypeScript và Babel trong cùng một dự án

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "strict": true,
    "module": "esnext",
    "lib": ["ES2019"],
    "noEmit": true,
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules/**/*", "dist/**/*"]
}

Cấu hình sẽ chỉ sử dụng TypeScript để kiểm tra kiểu và việc biên dịch TypeScript thực tế thành JavaScript thay vào đó sẽ được thực hiện bởi trình biên dịch Babel

Định cấu hình Trình biên dịch Babel với babel. cấu hình. json

Cũng giống như tsconfig. json đã được thêm vào, chúng ta có thể thêm một tệp khác cho cài đặt cấu hình Babel. Tập tin này được đặt tên là "babel. cấu hình. json" và chứa các mục sau

{
  "presets": [
    [
      "@babel/preset-env",
      { "modules": false, "targets": { "node": "current" } }
    ],
    ["@babel/preset-typescript"]
  ],
  "ignore": ["node_modules"]
}

Trình biên dịch Babel không gõ kiểm tra mã TypeScript và sẽ cố gắng xuất JavaScript hợp lệ bất kể nguồn TypeScript là gì. Đây là lý do tại sao trình biên dịch TypeScript được sử dụng để kiểm tra kiểu và lợi ích của việc sử dụng cả hai là trình biên dịch Babel có sẵn các cài đặt sẵn để đảm bảo rằng JavaScript được tạo sẽ nhắm mục tiêu vào một môi trường cụ thể, trong trường hợp này là phiên bản hiện tại của Node. js và thuộc tính "" được đặt thành false, điều này sẽ bảo toàn các mô-đun ES

Tạo tệp Markdown

Với nút của chúng tôi. gói và thiết lập dự án js CLI. json đã được định cấu hình, phần tiếp theo của quy trình chuyển đổi Markdown thành HTML sẽ là tạo một tệp Markdown mẫu với nhiều nội dung bao gồm cú pháp cơ bản được chia sẻ giữa hầu hết các hương vị Markdown. Để thực hiện việc này, hãy tạo một thư mục mới cho dự án của bạn, có tên là "nội dung" và sau đó bên trong thư mục "nội dung" tạo một tệp mới có tên là "chỉ mục. mđ". Khi bạn có chỉ số. md đã tạo, bạn có thể sao chép nội dung Markdown mẫu bên dưới vào đó

# H1

## H2

### H3

#### H4

**bold text**

_italicized text_

> blockquote

1. First item
2. Second item
3. Third item

- First item
- Second item
- Third item

`code`

---

```javascript
function() {
  console.log("This is some javascript included in a markdown code block, and it will be converted to valid HTML with code syntax highlighting.");
}
```

<kbd>this is a keyboard input html elementkbd>

```html
this will remain html even after the Markdown is converted to HTML
```

[Dev Extent](https://www.devextent.com)

![Dev Extent](https://www.devextent.com/images/devextent.png)

Tạo nút. tập lệnh js CLI

Bây giờ có một tệp Markdown trong dự án, chúng ta có thể thêm một thư mục mới có tên "src" và trong thư mục đó thêm một tệp mới có tên "index. ts". Đây là nút. js chịu trách nhiệm chuyển đổi tệp Markdown thành tệp HTML và để bắt đầu, nó trông như thế này

(async function convertMarkdownToHtml() {
  console.log("Converting Markdown to HTML...");
})();

Bây giờ bạn có thể chạy lệnh npm run start-typecheck hoặc npm run start để biên dịch mà không cần kiểm tra đánh máy và bạn sẽ thấy nhật ký giao diện điều khiển được hiển thị. Điều này có nghĩa là nút. js CLI đang hoạt động bình thường, trước tiên hãy biên dịch mã nguồn TypeScript rồi thực thi đầu ra JavaScript được tạo bằng Node. js, tất cả trong một lệnh

Đọc tệp Markdown

Sau khi xác minh rằng Node. js CLI đang hoạt động chính xác, hãy tiếp tục và thêm mã này

import fs from "fs-extra";

(async function convertMarkdownToHtml() {
  console.log("Converting Markdown to HTML...");

  // markdown source
  const content = await fs.readFile("./content/index.md", "utf8");
})();

Mã bổ sung nhập một mô-đun nút, gói fs-extra và nó cung cấp chức năng "readFile" để đọc "chỉ mục" một cách không đồng bộ. md" trong thư mục nội dung. Nội dung của tệp Markdown sau đó được gán cho biến có tên "nội dung". Bây giờ chúng tôi có một chuỗi nội dung Markdown đã sẵn sàng để được chuyển đổi thành HTML và để làm điều đó, gói markdown-it sẽ được sử dụng

Định cấu hình tùy chọn trình phân tích cú pháp markdown-it Markdown

Để định cấu hình trình phân tích cú pháp đánh dấu có trong gói markdown-it, hãy tạo một thư mục mới trong thư mục "src" có tên "utils" rồi trong thư mục "utils" tạo một tệp TypeScript mới có tên "markdown. ts". Trong phần "đánh dấu. ts", gói markdown-it sẽ được nhập và đối tượng trình phân tích cú pháp markdown sẽ được tạo và xuất

import MarkdownIt from "markdown-it";

const markdown: MarkdownIt = MarkdownIt({
  html: true,
});

export { markdown };

Có một tùy chọn cấu hình được chuyển vào cấu hình trình phân tích cú pháp đánh dấu và đó là hỗ trợ các thẻ HTML trong nguồn đánh dấu. Đây là tùy chọn và không bắt buộc nhưng có thể hữu ích khi hỗ trợ sử dụng HTML cho các phần tử thiếu cú ​​pháp Markdown

Thêm đánh dấu cú pháp mã bằng tô sáng. js

Ngoài việc hỗ trợ tùy chọn các thẻ HTML trong nguồn Markdown, trình phân tích cú pháp đánh dấu đi kèm với gói markdown-it có thể áp dụng tô sáng cú pháp cho các khối mã được chỉ định. Thực hiện các điều chỉnh sau đối với markdown. ts để bao gồm tùy chọn này

import hljs from "highlight.js";
import MarkdownIt from "markdown-it";

const markdown: MarkdownIt = MarkdownIt({
  html: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '
' +
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
          "
"
);
} catch (__) {}
}
return (
'
' +
markdown.utils.escapeHtml(str) +
"
"
);
},
});
export { markdown };

Nổi bật. js có thể tự động xác định đánh dấu cú pháp ngôn ngữ dựa trên biến "lang" có giá trị được chuyển vào hàm "highlight" đánh dấu. API mô-đun js cung cấp

Thay vì lỗi khi gặp phải cú pháp không nhất quán, tham số "ignoreIllegals" sẽ định cấu hình phần tô sáng. js highlighter để hoàn thành việc tô sáng. Bạn có thể muốn loại bỏ tùy chọn này, nhưng có một cuộc thảo luận về việc có nên thay đổi giá trị mặc định của các tùy chọn "ignoreIllegals" thành true hay không, như được sử dụng trong ví dụ này

Nếu đánh dấu. js không thể xác định ngôn ngữ của khối mã, nó sẽ áp dụng hàm "escapeHtml" được cung cấp cho chuỗi đánh dấu và cũng bao bọc phần khối mã thành một phần tử mã được lồng bên trong một phần tử trước

Những bổ sung này sẽ nhập phần nổi bật. js và áp dụng định dạng cần thiết để tự động làm nổi bật các khối mã dựa trên ngôn ngữ được cung cấp. Tệp đánh dấu mẫu được tạo ở bước trước bao gồm một khối mã JavaScript sẽ được tô sáng cú pháp động được áp dụng khi chuyển đổi sang HTML

Chuyển đổi Markdown sang HTML bằng trình phân tích cú pháp markdown-it

"giảm giá. ts" hiện có thể được nhập trong "chỉ mục. ts" để truy cập trình phân tích cú pháp Markdown với cấu hình trước đó được áp dụng. Để nhập "markdown. ts" và sử dụng chức năng "kết xuất" do API mô-đun markdown-it cung cấp, thực hiện những thay đổi này đối với "chỉ mục. tập tin ts"

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Nội dung Markdown, được chuyển đổi thành HTML, hiện được gán cho biến có tên "được kết xuất". Để xem HTML được hiển thị, bạn có thể xuất biến "được hiển thị" ra bàn điều khiển và sau đó chạy lệnh npm run start-typecheck, một lần nữa

Nội dung của biến "kết xuất" là HTML hợp lệ, nhưng chúng không đại diện cho toàn bộ tài liệu HTML. Để đảm bảo rằng nguồn Markdown được chuyển đổi thành một tài liệu HTML hoàn chỉnh và hợp lệ, một biến khác được thêm vào, có tên là "htmlFile" và biến này bao bọc giá trị chuỗi biến "được kết xuất" trong mã HTML bổ sung để tạo toàn bộ tài liệu HTML. "chỉ số. ts" bây giờ sẽ trông như thế này

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Ghi chú. "mặc định. css" được tham chiếu trong phần đầu của tài liệu HTML sẽ được sao chép trong bước sau từ chủ đề biểu định kiểu mặc định được bao gồm trong phần tô sáng. gói npm js

Viết tệp HTML

Thay vì viết tệp này trong thư mục gốc của dự án, mô-đun fs-extra bao gồm chức năng "mkdirs" có thể tạo thư mục theo chương trình. Sử dụng chức năng này, một thư mục mới sẽ được tạo có tên là "công khai" và tệp HTML được tạo sẽ được lưu ở đó

Nổi bật. js cung cấp nhiều chủ đề biểu định kiểu khác nhau để lựa chọn khi áp dụng tô sáng cú pháp khối mã. Đối với ví dụ này, "mặc định. css" được sử dụng và tệp đó được sao chép từ phần tô sáng. js, bên trong thư mục "node_modules" vào thư mục chung được tạo theo chương trình cho HTML được tạo. Bằng cách này khi biểu định kiểu được tham chiếu trong "chỉ mục. html", tệp "mặc định. css" có sẵn trong cùng một thư mục

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Chạy lệnh npm run start-typecheck một lần nữa và một tệp mới "index. html" sẽ được tạo bên trong một thư mục mới có tên "public" trong thư mục dự án của bạn, cùng với thư mục "default. css" đã được sao chép từ thư mục "node_modules"

Bây giờ bạn có thể xem "chỉ mục. html" sẽ chứa nguồn Markdown được chuyển đổi thành HTML. "chỉ số. html" sẽ trông giống như thế này

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Bạn có thể xác thực mã HTML đã tạo bằng tệp , và bạn cũng có thể sử dụng gói npm http-server để tạo một máy chủ web cục bộ trên máy tính của mình để xem "chỉ mục. html" trong trình duyệt

Xem tệp HTML cục bộ

Để kiểm tra Markdown được chuyển thành HTML, trong trình duyệt, bạn có thể chạy lệnh npm install http-server --save-dev để cài đặt gói npm http-server. Sau đó thêm phần sau vào gói. thuộc tính tập lệnh json

{
  "scripts": {
    "typecheck": "tsc --p .",
    "clean": "rimraf dist",
    "compile": "cross-env-shell babel src -d dist --source-maps --extensions '.ts'",
    "start": "npm run clean && npm run compile && node ./dist/index.js",
    "start-typecheck": "npm run typecheck && npm run start"
  }
}

Sau đó, bạn có thể chạy lệnh npm run serve và tạo "index. html" sẽ được cung cấp từ thư mục chung trong dự án của bạn. Bạn sẽ có thể điều hướng đến "localhost. 8080" và ở đó bạn sẽ thấy nội dung của "chỉ mục. html" với các kiểu từ "mặc định. css" được áp dụng cho khối mã được tô sáng cú pháp

Làm cách nào để chuyển đổi MD sang HTML?

Làm cách nào để chuyển đổi Markdown sang HTML trong vscode?

Làm cách nào để sử dụng Markdown trong HTML?

Trong HTML, một hình ảnh được thêm vào bằng cách sử dụng thẻ và các liên kết được thêm vào bằng cách sử dụng thẻ . Trong Markdown, hình ảnh bắt đầu bằng dấu chấm than (. ), theo sau là dấu ngoặc vuông ([]) cho 'văn bản thay thế' và dấu ngoặc đơn (()) cho đường dẫn đến hình ảnh. Bạn cũng có thể bao gồm một tiêu đề tùy chọn bên trong dấu ngoặc kép (""). images start with an exclamation point (!), followed by square brackets ([]) for the 'alt text', and parentheses (()) for the path to the image. You can also include an optional title inside double quotes ("").

Làm cách nào để sử dụng JS được đánh dấu trong HTML?