-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #460 from carbon-bond/add-markdown-support
支援 markdown
- Loading branch information
Showing
15 changed files
with
455 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .markdown { | ||
| & li { | ||
| margin: 2px 0px; | ||
| } | ||
| & ul { | ||
| padding-left: 20px; | ||
| } | ||
| & ol { | ||
| padding-left: 20px; | ||
| } | ||
| & p { | ||
| margin: 15px 0px; | ||
| } | ||
| & h2 { | ||
| margin: 15px 0px; | ||
| } | ||
| & h3 { | ||
| margin: 8px 0px; | ||
| } | ||
| & blockquote { | ||
| background: var(--gray-1); | ||
| border-left: 4px solid var(--gray-3); | ||
| margin: 8px 5px; | ||
| padding: 5px 10px; | ||
| } | ||
| & pre > code { | ||
| width: 100%; | ||
| color: var(--gray-2); | ||
| display: inline-block; | ||
| overflow: scroll; | ||
| overflow-y: hidden; | ||
| background-color: black; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| margin: 10px 0px; | ||
| } | ||
| & img { | ||
| max-width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import * as React from 'react'; | ||
| import { marked } from 'marked'; | ||
| import '../../css/markdown.css'; | ||
|
|
||
| import Prism from 'prismjs'; | ||
|
|
||
| const renderer = { | ||
| heading(text: string, level: 1 | 2 | 3 | 4 | 5 | 6) { | ||
| const escaped_text = text.replace(/[\s]+/g, '_'); | ||
| const new_level = level <= 5 ? level + 1 : level; | ||
| if (level == 1) { | ||
| return ` | ||
| <h${new_level}> | ||
| <a name="${escaped_text}" class="anchor" href="#${escaped_text}"> | ||
| <span class="header-link">⚓</span> | ||
| </a> | ||
| ${text} | ||
| </h${new_level}>`; | ||
| } else { | ||
| return `<h${new_level}> | ||
| ${text} | ||
| </h${new_level}>`; | ||
| } | ||
| }, | ||
| link(href: string | null, _title: string | null, text: string) { | ||
| return `<a href="${href}" target="_blank">${text}</a>`; | ||
| } | ||
| }; | ||
|
|
||
| marked.use({ | ||
| gfm: true, | ||
| breaks: true, | ||
| sanitize: true, | ||
| renderer, | ||
| highlight: function(code: string, lang: string) { | ||
| if (lang && Prism.languages[lang]) { | ||
| try { | ||
| return Prism.highlight(code, Prism.languages[lang], lang); | ||
| } catch (__) { | ||
| return code; | ||
| } | ||
| } | ||
| return code; | ||
| } | ||
| }); | ||
|
|
||
| export function ShowMarkdown(props: { | ||
| text: string | ||
| }): JSX.Element { | ||
| return <div | ||
| className="markdown" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: marked.parse(props.text) | ||
| }}> | ||
| </div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import * as React from 'react'; | ||
| import { isImageLink, isLink } from '../../ts/regex_util'; | ||
|
|
||
| export function ShowLine(props: {line: string}): JSX.Element { | ||
| let key = 0; | ||
| let elements: JSX.Element[] = []; | ||
| props.line.split(' ').forEach(word => { | ||
| if (isLink(word)) { | ||
| elements.push(<a key={key++} target="_blank" href={word}>{word}</a>); | ||
| } else { | ||
| elements.push(<React.Fragment key={key++}>{word}</React.Fragment>); | ||
| } | ||
| elements.push(<React.Fragment key={key++}> </React.Fragment>); | ||
| }); | ||
| return <>{elements}</>; | ||
| } | ||
|
|
||
| export function ShowPureText(props: { text: string; }): JSX.Element { | ||
| let key = 0; | ||
| return <>{props.text.split('\n').map(line => { | ||
| if (/^\s*$/.test(line)) { | ||
| // 若整行都是空的，換行 | ||
| return <br key={key++} />; | ||
| } else if (isImageLink(line.trim())) { | ||
| return <p key={key++}> | ||
| <a target="_blank" href={line}> | ||
| {line} | ||
| <img key={key++} src={line.trim()} width="100%" alt="圖片" /> | ||
| </a> | ||
| </p>; | ||
| } else { | ||
| return <p key={key++}> | ||
| <ShowLine line={line} /> | ||
| </p>; | ||
| } | ||
| })} | ||
| </>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,20 @@ | ||
| import * as React from 'react'; | ||
| import { isImageLink, isLink } from '../../ts/regex_util'; | ||
| import { ShowMarkdown } from './show_markdown'; | ||
| import { ShowPureText } from './show_pure_text'; | ||
|
|
||
| export function ShowLine(props: {line: string}): JSX.Element { | ||
| let key = 0; | ||
| let elements: JSX.Element[] = []; | ||
| props.line.split(' ').forEach(word => { | ||
| if (isLink(word)) { | ||
| elements.push(<a key={key++} target="_blank" href={word}>{word}</a>); | ||
| } else { | ||
| elements.push(<React.Fragment key={key++}>{word}</React.Fragment>); | ||
| } | ||
| elements.push(<React.Fragment key={key++}> </React.Fragment>); | ||
| }); | ||
| return <>{elements}</>; | ||
| export enum Format { | ||
| PureText, | ||
| Markdown, | ||
| } | ||
|
|
||
| export function ShowText(props: { text: string; }): JSX.Element { | ||
| let key = 0; | ||
| return <>{props.text.split('\n').map(line => { | ||
| if (/^\s*$/.test(line)) { | ||
| // 若整行都是空的，換行 | ||
| return <br key={key++} />; | ||
| } else if (isImageLink(line.trim())) { | ||
| return <p key={key++}> | ||
| <a target="_blank" href={line}> | ||
| {line} | ||
| <img key={key++} src={line.trim()} width="100%" alt="圖片" /> | ||
| </a> | ||
| </p>; | ||
| } else { | ||
| return <p key={key++}> | ||
| <ShowLine line={line} /> | ||
| </p>; | ||
| } | ||
| })} | ||
| </>; | ||
| export function ShowText(props: { | ||
| text: string, | ||
| format: Format | ||
| }): JSX.Element { | ||
| switch (props.format) { | ||
| case Format.PureText: | ||
| return <ShowPureText text={props.text} />; | ||
| case Format.Markdown: | ||
| return <ShowMarkdown text={props.text} />; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.