Strength & Honor

Home MacBook Html CSS JavaScript Python etc. All Posts.

html 에 소스코드 보여주기 (2)

여태까지 소스코드를 보여주기 위해서는 타 사이트를 이용해서 자바스크립트 링크를 만든다거나 colorscript.com 사이트에 들어가서 변환하는 방법을 소개 하였다.

이번에는 이런 사이트의 도움을 받지 않고 VS Code 에서 작성한 것으로 소스코드를 보여주는 방법을 소개 해 보겠다.

VS Code 에서 "test.md" 를 신규 생성 해 본다.
물론 파일명은 본인이 정하면 된다.

html 의 기본문구 즉 html 파일에서 ! 입력 후 나타나는 기본 문장을 test.md 파일에 기재한다.
이때 반드시 " ```html" 을 맨 상단에 넣고 그 다음줄에 기재해야 한다.

test.md 파일에서 "command + shift + p" 버튼을 누른 후 "Markdown : Copy as HTML" 을 선택한다.
보이지 않으면 extension 을 추가로 설치하면 된다.

그러면 클립보드로 복사가 되는데 이를 아래의 pre 태그안에 붙여 넣느다.
실제 VS Code 에 붙여 넣기 하면 아래와 같이 보여지지만


    <!DOCTYPE html>

    <html lang="en">

    <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>Document</title>

    </head>

    &lt;body&gt;</p>

    &lt;/body&gt;</p>

    &lt;/html&gt;

웹에서 보여지는 결과는 아래와 같이 아주 잘 표시가 된다.


    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>

    </body>

    </html>

사실 태그를 표시하는 앞의 꺽쇠 즉 "<" 을 "&lt;" 로 대치만 하면 되는데 짧은 문장이면 상관없으나 문장이 길면 일일히 붙여 넣기해야 하는데 너무 귀찮기 때문에 이런 방법을 쓰지만 짧은 문장일 경우에는 앞의 꺽쇠만 바꿔주면 된다.
아래는 실제 대치한 문장이다.
결과는 위와 동일하게 잘 표시가 된다. 


    &lt;!DOCTYPE html>
    &lt;html lang="en">
    &lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Document
    &lt;/head>
    &lt;body>
        
    &lt;/body>
    &lt;/html>

참고로 "&lt;" 은 html 에서는 "<" 로 표시되므로 html 에서 순수하게 "&lt;" 값을 보여주고 싶다면 아래와 같이 span 태그를 이용하면 된다. 


    <span class="token entity" title="<">&amp;lt;</span>


Categories


CSS

Wizzen2801

One Day, One New!
Avatar