추천드려요 🙆
◼ 웹사이트에 코드를 넣으려는 사람
◼ 프로그래밍 관련 포트폴리오를 만드려는 사람 (잇츠 미..😅)
Overview
위에서도 말했지만 이번에 포트폴리오를 만들 때 코드를 직접적으로 삽입하려고
준비중인 취준생입니다 😎 하지만 그냥 코드를 넣기에는 너무나도 밋밋한 것,,,
그래서 어떻게 할지 고민하던 중 'hightlight.js'를 만나게 됩니다 💨
highlight.js 란
highlight.js는 'Syntax highlighting for the Web'
즉, 코드를 코드 에디터 처럼 정돈해주는 라이브러리이다.
사용방법
◾ 웹사이트 : https://highlightjs.org/
◾ 1. 웹사이트에 접속 : Get version 11.2.0 클릭!
◾ 2. 원하는 방법으로 highlight.js 불러오기! : 난 CDN으로 해보았다 😉✨
◾ 3.<head>태그에 해당 코드를 삽입!
<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">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="./app.js"></script>
<title>highlight JS 연습하기</title>
</head>◾ 4. <body>태그에 하이라이트가 필요한 코드를 삽입! :
→ <pre>태그와 <code>태그를 사용하고 class에 사용하는 프로그래밍 언어를 적어준다!
<pre>
<code class="html">
<!-- html code입니다 -->
<h1>제목입니다</h1>
<div>
<p>P태그입니다</p>
<span>SPAN태그입니다.</span>
</div>
</code>
</pre>◾ 5. 웹사이트 PREVIEW
문제점
한가지 문제점이 있었다. 바로 HTML코드가 작동되지 않는 것!
HTML 코드의 <code>태그 안에 삽입되기 때문에 작동이 되지 않는 것은 어떻게 보면 당연한 일,, 😥
해결방법
<pre>
<code class="html">
<!-- html code입니다 -->
<h1>제목입니다</h1>
<div> </div>
</code>
</pre>- entity 코드를 사용해 두 개의 심볼 (<,>)을 심볼 그대로 읽히도록하여 태그로 인식되지 않도록 만들면 된다.😎
- 하지만 HTML 코드가 길어지면 해당 심볼을 entity코드로 모두 변경하기에는 어려운 점이 있고,,생산성이 떨어지는,,😪
→ 하지만 이것도 해결방법이 있다는 것!
◾ HTML Entity 변환 웹사이트 : https://mothereff.in/html-entities
◾ 해당 웹사이트를 사용하면 HTML 코드를 쉽게 변환할 수 있게 된다~
잘 나오는 것을 볼 수 있다! 😉✨
Frontend Developer