0
const test = 'block codeblock test';
1

2
alert(test);

0
<div>
1
    <!-- 헤더 -->
2
    <div>
3
        <div><!-- 적색 버튼 --></div>
4
        <div><!-- 황색 버튼 --></div>
5
        <div><!-- 녹색 버튼 --></div>
6
    </div>
7

8
    <pre>
9
        <!-- 코드 내용 -->
10
    </pre>
11
</div>

0
loadLanguage([ 'javascript', 'typescript', 'java', 'html', 'css', 'json', 'scss', 'sass', 'sql', 'batch', 'bash' ]);
1

2
const renderer = new marked.Renderer();
3

4
// 코드블럭 렌더링
5
renderer.code = (code: string, lang: string | undefined): string =>
6
{
7
    // 유효한 언어가 있을 경우
8
    if (lang && renderer?.options?.highlight)
9
    {
10
        code = renderer.options.highlight(code, lang as string) as string;
11

12
        const langClass = 'language-' + lang;
13

14
        return `
15
            <div class="codeblock">
16
                <div class="top">
17
                    <div></div>
18
                    <div></div>
19
                    <div></div>
20
                </div>
21

22
                <pre class="${langClass}">
23
                    ${code}
24
                </pre>
25
            </div>
26
        `;
27
    }
28

29
    // 없을 경우
30
    else
31
    {
32
        lang = 'unknown';
33

34
        const langClass = 'language-' + lang;
35

36
        return `
37
            <div class="codeblock">
38
                <div class="top">
39
                    <div></div>
40
                    <div></div>
41
                    <div></div>
42
                </div>
43

44
                <pre class="${langClass}">
45
                    ${code}
46
                </pre>
47
            </div>
48
        `;
49
    }
50
};

0
$fd: 18px;
1
$fm: 14px;
2

3
pre[class*="language-"],
4
code[class*="language-"] {
5
    @include gutter;
6

7
    background-color: #161d2c;
8
    padding: 55px 20px 20px 20px !important;
9

10
    border-radius: 10px;
11

12
    font-family: Hack, AppleSDGothicNeo, sans-serif;
13
    color: white;
14

15
    text-align: left;
16
    white-space: pre;
17
    word-spacing: normal;
18
    word-break: normal;
19
    word-wrap: normal;
20

21
    -webkit-hyphens: none;
22
    -moz-hyphens: none;
23
    -ms-hyphens: none;
24
    hyphens: none;
25

26
    overflow: auto;
27
}
28

29
code:not([class*="language-"]) {
30
    color: white;
31

32
    font-family: Hack, AppleSDGothicNeo, sans-serif;
33
    font-size: $fd - 4px;
34

35
    display: inline-block;
36

37
    padding: 0px 4px;
38
    margin: 0px 3px;
39

40
    border-radius: 5px;
41

42
    @media (max-width: 960px) {
43
        font-size: $fm - 4px;
44
    }
45
}
46

47
.codeblock {
48
    position: relative;
49

50
    .top {
51
        position: absolute;
52

53
        top: 0px;
54
        left: 0px;
55

56
        width: 100%;
57
        padding: 5px 20px;
58

59
        background-color: #2b3445;
60

61
        border-top-left-radius: 10px;
62
        border-top-right-radius: 10px;
63

64
        display: flex;
65
        flex-direction: row;
66

67
        align-items: center;
68

69
        div {
70
            width: 15px;
71
            height: 15px;
72

73
            border-radius: 50%;
74

75
            margin: 0px 5px;
76

77
            &:nth-child(2) {
78
                background-color: #fe5f57;
79
            }
80

81
            &:nth-child(3) {
82
                background-color: #ffbd2e;
83
            }
84

85
            &:nth-child(4) {
86
                background-color: #29c941;
87
            }
88
        }
89
    }
90
}

0
loadLanguage([ 'javascript', 'typescript', 'java', 'html', 'css', 'json', 'scss', 'sass', 'sql', 'batch', 'bash' ]);
1

2
const renderer = new marked.Renderer();
3

4
// 코드블럭 렌더링
5
renderer.code = (code: string, lang: string | undefined): string =>
6
{
7
    // 유효한 언어가 있을 경우
8
    if (lang && renderer?.options?.highlight)
9
    {
10
        code = renderer.options.highlight(code, lang as string) as string;
11

12
        const langClass = 'language-' + lang;
13

14
        return `
15
            <div class="codeblock">
16
                <div class="top">
17
                    <p>${lang.toUpperCase()}</p>
18
                    <div></div>
19
                    <div></div>
20
                    <div></div>
21
                </div>
22

23
                <pre class="${langClass}">
24
                    ${code}
25
                </pre>
26
            </div>
27
        `;
28
    }
29

30
    // 없을 경우
31
    else
32
    {
33
        lang = 'unknown';
34

35
        const langClass = 'language-' + lang;
36

37
        return `
38
            <div class="codeblock">
39
                <div class="top">
40
                    <p>${lang.toUpperCase()}</p>
41
                    <div></div>
42
                    <div></div>
43
                    <div></div>
44
                </div>
45

46
                <pre class="${langClass}">
47
                    ${code}
48
                </pre>
49
            </div>
50
        `;
51
    }
52
};

0
.top {
1
    /* top scss 생략됨 */
2

3
    div {
4
        width: 15px;
5
        height: 15px;
6

7
        border-radius: 50%;
8

9
        margin: 0px 5px;
10

11
        p {
12
            margin: 0px;
13
            flex-grow: 1;
14

15
            color: map-get($yellow, "400");
16
        }
17

18
        &:nth-child(2) {
19
            background-color: #fe5f57;
20
        }
21

22
        &:nth-child(3) {
23
            background-color: #ffbd2e;
24
        }
25

26
        &:nth-child(4) {
27
            background-color: #29c941;
28
        }
29
    }
30
}

0
<button onclick="copyCode(this);">
1
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-icon="clipboard" class="i-clipboard">
2
        <path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path>
3
    </svg>
4
</button>

0
/**
1
 * 코드 복사 함수
2
 *
3
 * @param {DOMElement} dom: HTML DOM
4
 */
5
function copyCode(dom)
6
{
7
    window.getSelection().selectAllChildren(dom.parentElement.querySelector('pre'));
8
    document.execCommand('copy');
9

10
    const origin = dom.innerHTML;
11
    dom.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-icon="check" class="i-check"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>';
12

13
    setTimeout(() => dom.innerHTML = origin, 1000);
14
}

0
button {
1
    position: absolute;
2

3
    top: 50px;
4
    right: 20px;
5
    width: 40px;
6
    height: 40px;
7

8
    background-color: #1e2739;
9
    cursor: pointer;
10

11
    border: 1px solid map-get($grey, "600");
12
    border-radius: 10px;
13

14
    opacity: 0;
15

16
    transition: 0.5s;
17

18
    &:hover {
19
        transition: 0.5s;
20
    }
21
}

0
loadLanguage([ 'javascript', 'typescript', 'java', 'html', 'css', 'json', 'scss', 'sass', 'sql', 'batch', 'bash' ]);
1

2
const renderer = new marked.Renderer();
3

4
// 코드블럭 렌더링
5
renderer.code = (code: string, lang: string | undefined): string =>
6
{
7
    // 유효한 언어가 있을 경우
8
    if (lang && renderer?.options?.highlight)
9
    {
10
        code = renderer.options.highlight(code, lang as string) as string;
11

12
        const langClass = 'language-' + lang;
13

14
        return `
15
            <div class="codeblock">
16
                <div class="top">
17
                    <p>${lang.toUpperCase()}</p>
18
                    <div></div>
19
                    <div></div>
20
                    <div></div>
21
                </div>
22

23
                <button onclick="copyCode(this);">
24
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-icon="clipboard" class="i-clipboard">
25
                        <path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path>
26
                    </svg>
27
                </button>
28

29
                <pre class="${langClass}">
30
                    ${code}
31
                </pre>
32
            </div>
33
        `;
34
    }
35

36
    // 없을 경우
37
    else
38
    {
39
        lang = 'unknown';
40

41
        const langClass = 'language-' + lang;
42

43
        return `
44
            <div class="codeblock">
45
                <div class="top">
46
                    <p>${lang.toUpperCase()}</p>
47
                    <div></div>
48
                    <div></div>
49
                    <div></div>
50
                </div>
51

52
                <button onclick="copyCode(this);">
53
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-icon="clipboard" class="i-clipboard">
54
                        <path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path>
55
                    </svg>
56
                </button>
57

58
                <pre class="${langClass}">
59
                    ${code}
60
                </pre>
61
            </div>
62
        `;
63
    }
64
};

0
<table>
1
    <tbody>
2
        <tr>
3
            <td><!-- 라인 넘버 --></td>
4
            <td><!-- 코드 --></td>
5
        </tr>
6

7
        <tr>
8
            <td><!-- 라인 넘버 --></td>
9
            <td><!-- 코드 --></td>
10
        </tr>
11

12
        <tr>
13
            <td><!-- 라인 넘버 --></td>
14
            <td><!-- 코드 --></td>
15
        </tr>
16

17
        <tr>
18
            <td><!-- 라인 넘버 --></td>
19
            <td><!-- 코드 --></td>
20
        </tr>
21
    </tbody>
22
</table>

0
table {
1
    border-collapse: collapse;
2

3
    & td {
4
        line-height: $fd + 4px;
5

6
        @media (max-width: 960px) {
7
            line-height: $fm + 4px;
8
        }
9
    }
10

11
    & td:nth-child(1) {
12
        color: #455983;
13
        padding-right: 10px;
14

15
        border-right: 1px solid #455983;
16

17
        text-align: right;
18

19
        user-select: none;
20
        -moz-user-select: none;
21
        -webkit-user-select: none;
22
    }
23

24
    & td:nth-child(2) {
25
        width: 100%;
26

27
        padding: 0px 20px 0px 10px;
28
    }
29
}

0
loadLanguage([ 'javascript', 'typescript', 'java', 'html', 'css', 'json', 'scss', 'sass', 'sql', 'batch', 'bash' ]);
1

2
const renderer = new marked.Renderer();
3

4
// 코드블럭 렌더링
5
renderer.code = (code: string, lang: string | undefined): string =>
6
{
7
    // 유효한 언어가 있을 경우
8
    if (lang && renderer?.options?.highlight)
9
    {
10
        code = renderer.options.highlight(code, lang as string) as string;
11

12
        const langClass = 'language-' + lang;
13

14
        const line = code.split('').map((item, index) => `
15
            <tr data-line=${index + 1}>
16
                <td class="line-number" data-number="${index + 1}">${index + 1}</td>
17
                <td class="line-code" data-number=${index + 1}>${item}</td>
18
            </tr>`).join('\n').replace(/\t|\\n/, '');
19

20
        return `
21
            <div class="codeblock">
22
                <div class="top">
23
                    <p>${lang.toUpperCase()}</p>
24
                    <div></div>
25
                    <div></div>
26
                    <div></div>
27
                </div>
28

29
                <button onclick="copyCode(this);">
30
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-icon="clipboard" class="i-clipboard">
31
                        <path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path>
32
                    </svg>
33
                </button>
34

35
                <pre class="${langClass}">
36
                    <table>
37
                        <tbody>${line}</tbody>
38
                    </table>
39
                </pre>
40
            </div>
41
        `;
42
    }
43

44
    // 없을 경우
45
    else
46
    {
47
        lang = 'unknown';
48

49
        const langClass = 'language-' + lang;
50

51
        const line = code.split('\n').map((item, index) => `
52
            <tr data-line=${index + 1}>
53
                <td class="line-number" data-number="${index + 1}">${index + 1}</td>
54
                <td class="line-code" data-number=${index + 1}>${item}</td>
55
            </tr>`).join('\n').replace(/\t|\\n/, '');
56

57
        return `
58
            <div class="codeblock">
59
                <div class="top">
60
                    <p>${lang.toUpperCase()}</p>
61
                    <div></div>
62
                    <div></div>
63
                    <div></div>
64
                </div>
65

66
                <button onclick="copyCode(this);">
67
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-icon="clipboard" class="i-clipboard">
68
                        <path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path>
69
                    </svg>
70
                </button>
71

72
                <pre class="${langClass}">
73
                    <table>
74
                        <tbody>${line}</tbody>
75
                    </table>
76
                </pre>
77
            </div>
78
        `;
79
    }
80
};

0
<tr data-number="126">
1
    <td data-number="126">126</td>
2
    <td data-number="126"><!-- code --></td>
3
</tr>

0
table {
1
    & tr:nth-child(2n) {
2
        background-color: #1c2335;
3
    }
4
}

0
table {
1
    & tr:hover {
2
        background-color: #546687;
3

4
        & td:first-child {
5
            color: white;
6
        }
7
    }
8
}