deno-gfm - GitLite

KO | EN

gitlite — search

#javascript #python #golang #android #machine-learning #deep-learning #java #cli #vue #awesome-list #security #mcp #openai #open-source

deno-gfm

(★ 242)

Server-side GitHub Flavored Markdown rendering for Deno

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- settings.json
- content.md
- main.ts
- .gitignore
- .parcelrc
- main.scss
- package-lock.json
- package.json
- patch.ts
- - alerts.html
  - alerts.md
  - alerts.strip
  - basic.html
  - basic.md
  - basic.strip
  - codeMath.html
  - customAllowedClasses.html
  - customAllowedClasses.md
  - customAllowedTags.html
  - customAllowedTags.md
  - detailsSummaryDel.html
  - detailsSummaryDel.strip
  - example.html
  - example.json
  - example.strip
  - footnote.html
  - footnote.md
  - lineBreaks.html
  - lineBreaks.md
  - lineBreaks.strip
  - math.html
  - math.md
  - math.strip
  - table.html
  - table.md
  - taskList.html
  - taskList.strip
  - yaml.html
  - yaml.md
- runTestServer.ts
- server_test.ts
- test.ts
- test_utils.ts
.gitignore
deno.json
LICENSE
mod.ts
README.md
style.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/denoland/deno-gfm

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd deno-gfm

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

import "npm:prismjs@1.29.0/components/prism-typescript.js";

이 명령어를 터미널에 그대로 입력해 실행하세요.

import "npm:prismjs@1.29.0/components/prism-bash.js";

이 명령어를 터미널에 그대로 입력해 실행하세요.

import "npm:prismjs@1.29.0/components/prism-rust.js";

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# deno-gfm

Server-side GitHub Flavored Markdown rendering for Deno, including GitHub style
CSS, syntax highlighting, and HTML sanitization.

## Usage

First install the package with the command:

```sh
deno add jsr:@deno/gfm
```

```js
import { CSS, render } from "@deno/gfm";

const markdown = `
# Hello, world!

| Type | Value |
| ---- | ----- |
| x    | 42    |

\`\`\`js
console.log("Hello, world!");
\`\`\`
`;

const body = render(markdown, {
  baseUrl: "https://example.com",
});

const html = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      main {
        max-width: 800px;
        margin: 0 auto;
      }
      ${CSS}
    </style>
  </head>
  <body>
    <main data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="markdown-body">
      ${body}
    </main>
  </body>
</html>
`;
```

### Styling

The GitHub CSS styles (https://primer.style) are used. There are two themes
available: light and dark.

There are three data attributes that can be used to control the theme:

- `data-color-mode`: `light` or `dark` or `auto`.
- `data-light-theme`: the name of the light theme (`light` or `dark`).
- `data-dark-theme`: the name of the dark theme (`light` or `dark`).

For example, if you want to use the dark theme only, set the following:

```html
<div data-color-mode="dark" data-dark-theme="dark" class="markdown-body">
  ... markdown body here ...
</div>
```

If you want to use the light or dark theme depending on the user's browser
preference, set the following:

```html
<div
  data-color-mode="auto"
  data-light-theme="light"
  data-dark-theme="dark"
  class="markdown-body"
>
  ... markdown body here ...
</div>
```

Also see the example application in the `example/` directory.

## Extensibility

By default syntax highlighting for JavaScript, Markdown, and HTML is included.
You can include more languages importing them:

```js
import { CSS, render } from "@deno/gfm";

// Add support for TypeScript, Bash, and Rust.
import "npm:prismjs@1.29.0/components/prism-typescript.js";
import "npm:prismjs@1.29.0/components/prism-bash.js";
import "npm:prismjs@1.29.0/components/prism-rust.js";
```

A full list of supported languages is available here:
https://unpkg.com/browse/prismjs@1.29.0/components/

## Inline rendering

By default, all rendering is in blocks. There are cases where one would like to
render some inline markdown, and this is achievable using the `inline` setting:

```ts
import { render } from "@deno/gfm";

const markdown = "My [Deno](https://deno.land) Blog";
const header = render(markdown, { inline: true });
console.log(header);
```

## Math rendering

By default math rendering is disabled. To enable it, you must include the
additional CSS and enable the `allowMath` setting:

```ts
import { CSS, KATEX_CSS, render } from "jsr:@deno/gfm";

const markdown = `
Block math:

$$ y = x^2 $$

Inline math: $y = x^2$
`;

const body = render(markdown, {
  allowMath: true,
});

const html = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      main {
        max-width: 800px;
        margin: 0 auto;
      }
      ${CSS}
      ${KATEX_CSS}
    </style>
  </head>
  <body>
    <main data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="markdown-body">
      ${body}
    </main>
  </body>
</html>
`;
```