๐๐ป์ด์ ๊ธ ์ฐธ๊ณ ํ๊ธฐ
https://daxx0ne.tistory.com/entry/FrontEnd-ํ ์คํธ-UI-์๋ํฐ-์ฌ์ฉํด๋ณด๊ธฐ
[FrontEnd] ํ ์คํธ UI ์๋ํฐ ์ฌ์ฉํด๋ณด๊ธฐ
ToastUI : NHN์์ ์ง์ํ๋ ๋ฌด๋ฃ ์์ง์ ์๋ํฐ ๐๐ปํ ์คํธ UI ์๋ํฐ ๊ฐ์ ๋ฐ ํํ ๋ฆฌ์ผ TOAST UI Editor 3.0์ด ์ถ์๋์์ต๋๋ค! TOAST UI Editor 2.0์ ์ถ์ํ๋ฉฐ ์๋ํฐ์๋ ๋งํฌ๋ค์ด ํ์ฑ์ ์ ํ๋์ ์ฑ๋ฅ
daxx0ne.tistory.com
Gitblog
์ ์ ๋ง๋ ๊ฐ๋จํ ํ์ด์ง๋ฅผ ๊นํ๋ธ๋ฅผ ํตํด ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค์ด ๋ณด์๋ค!
https://daxx0ne.github.io/Gitblog/
๋ค์์ด์ ๋ธ๋ก๊ทธ
daxx0ne.github.io
How to make a Gitblog?!?!
1. ๋ฆฌํฌ์งํฐ๋ฆฌ ์์ฑ ํ๋ฉด์ README ํ์ผ์ ๊ฐ์ด ๋ง๋ค์ด์ฃผ๊ธฐ
2. Settings > Pages > Branch๋ฅผ main์ผ๋ก ์ค์ > Save ๋ฒํผ ํด๋ฆญ
3. ์กฐ๊ธ ๊ธฐ๋ค๋ฆฐ ํ GitHub Pages ๋ฐ์ ๋์ ์ฃผ์๋ฅผ ํ์ธํ๊ธฐ
4. https://github.dev/๊นํ๋ธ์์ด๋/๋ฆฌํฌ์งํฐ๋ฆฌ์ด๋ฆ ์ ์ ์ํ๋ฉด ํ์ผ์ ์ฝ๊ฒ ์ถ๊ฐํ๊ณ ์ปค๋ฐ ๋ฐ ํธ์๋ฅผ ํ ์ ์๋ ํ๊ฒฝ์ด ๋์จ๋ค!
5. ํ์๊ธฐ ์ฐฝ์์ index.html ์ด๋ผ๋ ํ์ผ ์ถ๊ฐ ํ ํ ๋ด๊ฐ ์ฌ์ ์ ๋ง๋ค์ด ๋์ ์ฝ๋๋ค์ ์ ๋ฃ์ด์ค๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ค์์ด์ ๋ธ๋ก๊ทธ</title>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<!-- ์ ํ์ค ํ์ด๋ผ์ดํฐ ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ -->
<link rel="stylesheet"
href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css">
<script
src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<!-- ์ ํ์ค ํ์ด๋ผ์ดํฐ ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ -->
<!-- katex ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css">
<!-- katex ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ -->
<!-- uml ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ -->
<script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>
<!-- uml ํ๋ฌ๊ทธ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ -->
<style>
body {
margin: 0;
}
@font-face {
font-family: "GmarketSansMedium";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#viewer-1 {
padding: 0 10px;
}
html>body,
html>body .toastui-editor-contents,
html>body .toastui-editor-contents code,
html>body .toastui-editor-contents pre {
font-family: "GmarketSansMedium";
}
</style>
</head>
<body>
<template id="viewer-1-template">
# ์๋
ํ์ธ์.
## ๋ฐ๊ฐ์์.
- ํํ
- ํธํธ
- ํํ
# ์๋ฐ
```java
// ์ฃผ์์
๋๋ค.
int a = 10;
int b = 20;
System.out.println(a + b);
```
$$katex
x^2 + y^2 = 1
$$
```html
<script src="๊ฒฝ๋ก"></script>
```
$$uml
(First usecase)
(Another usecase) as (UC2)
usecase UC3
usecase (Last\nusecase) as UC4
$$
</template>
<div id="viewer-1"></div>
<script>
function stripIndent(str) {
const lines = str.split("\n");
let minIndent = Infinity;
// ์ฒซ ๋ฒ์งธ ์ค ์ดํ์ ๊ฐ ์ค์์ ๊ฐ์ฅ ์์ ๋ค์ฌ์ฐ๊ธฐ ๊ฐ์ ์ฐพ์ต๋๋ค.
for (let i = 1; i < lines.length; i++) {
const line = lines[i];
const indent = line.search(/\S/); // ์ฒซ ๋ฒ์งธ ๋น๊ณต๋ฐฑ ๋ฌธ์์ ์ธ๋ฑ์ค๋ฅผ ์ฐพ์ต๋๋ค.
if (indent !== -1 && indent < minIndent) {
minIndent = indent;
}
}
// ๋ชจ๋ ์ค์์ ๊ฐ์ฅ ์์ ๋ค์ฌ์ฐ๊ธฐ ๊ฐ์ ๋บ๋๋ค.
if (minIndent !== Infinity) {
for (let i = 0; i < lines.length; i++) {
lines[i] = lines[i].slice(minIndent);
}
}
// ๊ฒฐ๊ณผ ๋ฌธ์์ด์ ๋ฐํํฉ๋๋ค.
return lines.join("\n");
}
const Editor = toastui.Editor;
function katexPlugin() {
const toHTMLRenderers = {
katex(node) {
console.log("HI");
let html = katex.renderToString(node.literal, {
throwOnError: false
});
return [
{ type: "openTag", tagName: "div", outerNewLine: true },
{ type: "html", content: html },
{ type: "closeTag", tagName: "div", outerNewLine: true }
];
}
};
return { toHTMLRenderers };
}
// id๊ฐ 'viewer-1-template' ์ธ ์๋ฆฌ๋จผํธ๋ฅผ ์ฐพ๋๋ค.
const viewer1TemplateEl = document.querySelector("#viewer-1-template");
const viewer1MarkdownSource = stripIndent(viewer1TemplateEl.innerHTML); // ํฌํจํ๊ณ ์๋ ๋ด์ฉ
const viewer1 = Editor.factory({
el: document.querySelector("#viewer-1"),
viewer: true,
initialValue: viewer1MarkdownSource,
plugins: [
[toastui.Editor.plugin.codeSyntaxHighlight, { highlighter: Prism }],
katexPlugin,
[
toastui.Editor.plugin.uml,
{ rendererURL: "http://www.plantuml.com/plantuml/svg/" }
]
]
});
</script>
</body>
</html>6. ์์ค ์ ์ด์ ๋ค์ด๊ฐ์ index.html ํ์ผ์ ์ปค๋ฐ ๋ฐ ํธ์ ํด์ค๋ค.
7. ์์ฑ!!
๐๐ปGitHub - ๋ด๊ฐ ๋ง๋ ๋ธ๋ก๊ทธ ๋ฆฌํฌ์งํฐ๋ฆฌ
GitHub - daxx0ne/Gitblog
Contribute to daxx0ne/Gitblog development by creating an account on GitHub.
github.com
