VSCode를 Syntax Hihglighter로 쓰는 방법

자바스크립트 라이브러리가 별로인 이유

Visual Studio Code

highlight.js

이미 하이라이팅이 끝난 html을 사용하기에 클라이언트가 할 일이 줄어든단 점, .cshtml등의 파일은 지원하지 않는 라이브러리가 많단 점을 제외하고 단순히 하이라이팅된 결과물만 봐도 보통 VSC가 압도적으로 우세합니다.
훨씬 정교한 하이라이팅에 다양한 테마까지 지원되니 한 번 써보시면 도대체 라이브러리가 왜 필요한가 싶으실 겁니다.

일렉트론을 기반으로 구동되기에, html 에디터만 있으면 하이라이팅 된 html을 복사할 수 있어서 지금까진 티스토리 에디터를 사용했었는데, 이제 구에디터가 완전히 역사 속으로 사라져버려 대체제로 쓸만한 에디터를 찾다가 그냥 클립보드에 접근하는 게 훨씬 쉽단 걸 깨달았습니다.
티스토리 에디터가 사라지는 위기가 없었으면 모르고 살 뻔했네요.

Powershell

$text = Get-Clipboard -TextFormatType Html
$regex = "<div.*?>(.*)<\/div>"
$text = "<code class=""codeblock"">$(([regex]($regex)).match($text).groups[1].value)</code>"
 
Set-Clipboard -value $text

Bash

clipboard=$(osascript -e 'the clipboard as «class HTML»' |   perl -ne 'print chr foreach unpack("C*",pack("H*",substr($_,11,-3)))')
[[ $clipboard =~ (<meta charset=\'utf-8\'>)(<div)(.*)(<\/div>) ]]
echo '<code'${BASH_REMATCH[3]}'</code>' | pbcopy

난생처음 짜본 쉘 스크립트입니다.

운영체제에 관계없이 VSCode에서 코드를 Ctrl(Command) + C로 복사하신 후,

Windows에선 Powershell 코드를 vscCopyHtml.ps1처럼 .ps1 파일로 저장하고 Powershell에서 ./vscCopyHtml.ps1을
macOS에선 Bash 코드를 vscCopyHtml.bash처럼 .bash 파일로 저장하고 터미널에서 ./vscCopyHtml.bash를 입력하시면 실행됩니다.

홈 디렉토리에 파일을 생성하시고 ~/vscCopyHtml.ps1(bash)로 실행하시는 게 가장 편할 겁니다.

<code class="codeblock"><div><span style="color: #e5c07b;">console</span><span style="color: #abb2bf;">.</span><span style="color: #61afef;">log</span><span style="color: #abb2bf;">(</span><span style="color: #98c379;">"Hello&#160;World!"</span><span style="color: #abb2bf;">);</span></div></code>

예시로 console.log("Hello World!");를 복사하신 후 쉘 스크립트를 실행하시면 위와 같은 텍스트로 변경되어 클립 보드에 저장됩니다.

추가로, Bash에선 정규표현식에 .*?란 식을 넣으면 아무것도 매치가 안 돼서 VSCode의 배경색 등이 code 태그의 style에 들어가 있지만, Powershell에선 스타일을 모두 지워버리고 code.codeblock으로 대체하게 해둬서

.codeblock {
    position: relative;
    display: block;
    color: #abb2bf;
    background-color: #1c1d21;
    line-height: 1.5;
    white-space: pre-wrap;
    padding: 40px 10px 10px;
    border-radius: 2px;
    margin-bottom: 2rem;
}

이런 CSS를 추가하셔야 제대로 표시됩니다.

배경색과 글자색은 One Dark 기준이니, 다른 테마를 사용하시면 VSCode에서 코드를 복사하신 뒤, Powershell에 Get-Clipboard -TextFormatType Html을 입력하시고 제일 처음 보이는 div의 style에 들어있는 color, background-color를 확인해서 추가하시면 됩니다.

HTML + Javascript

클립보드에 접근할 권한이 없어서 textarea에 코드를 붙여 넣는 작업을 한 번 더 하셔야 하긴 하지만, OS에 크게 구애받지 않고 Javascript로도 상술한 과정을 진행하실 수 있습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>vscCopyHtml</title>
    </head>
    <body>
        <textarea
            autofocus
            name=""
            id="pasteHere"
            cols="30"
            rows="10"
        ></textarea>
        <script src="app.js"></script>
    </body>
</html>

const textarea = document.getElementById("pasteHere");
 
function handlePaste(event) {
    event.preventDefault();
    const clipboard = event.clipboardData.getData("text/html");
    const codeBlock = /<div.*?>(.*)<\/div>/;
 
    textarea.value = `<code class="codeblock">${
        clipboard.match(codeBlock)[1]
    }</code>`;
    textarea.focus();
    textarea.select();
    document.execCommand("copy");
}
 
textarea.addEventListener("paste", handlePaste);

쉘 스크립트와 달리 VSCode에서 코드를 복사하신 뒤, textarea에 붙여 넣기를 진행하셔야 하이라이팅 된 html을 클립보드에 넣을 수 있습니다.

VSCode에서 코드를 복사한 뒤 이 사이트에 가셔서 아무 곳이나 누르시고 Ctrl(Command) + V를 누르시면 위 코드가 작동하는 걸 보실 수 있습니다.