🚩 HTML/CSS 글 모음 (총 15 건)
| 2023-05-09 338 View 공개 |
프로그래밍을 공부하거나 개발 관련 블로그를 운영하는 분들은 소스코드를 글에 첨부하는 경우가 많다. 티스토리 블로그에서는 이를 위한 여러 가지 방법이 있다. 이 글에서는 가장 일반적인 방법으로 소스코드를 티스토리 블로그에 코드블록 형태로 삽입하는 방법을 알아보자.
티스토리 블로그에서는 기본적으로 <pre><code> 태그를 이용해 코드블록을 만들 수 있다. <pre> 태그는 미리 서식이 지정된 텍스트를 표현할 때 사용하고, <code> 태그는 컴퓨터 코드를 표현할 때 사용한다. 이 두 태그를 함께 사용하면 소스코드를 그대로 보여줄 수 있다.
<pre><code> 여기에 소스코드를 입력한다 </code></pre>
위와 같이 작성하면 입력한 코드가 그대로 보이게 된다. 하지만 이 방법은 코드에 특수문자가 포함되어 있을 경우 문제가 생길 수 있다. 예를 들어, <나 >와 같은 HTML 태그를 사용하는 코드를 넣으면, 해당 코드가 HTML로 해석되어 보이지 않게 된다.
HTML Entities를 사용하면, HTML에서 사용되는 특수문자를 안전하게 표현할 수 있다. <는 <, >는 >로 바꿔서 사용하면 됩니다.
<pre><code> <div>Hello, World!</div> </code></pre>
위와 같이 작성하면 웹브라우저는 HTML 태그로 인식하지 않고 그대로 텍스트로 보여준다. 이렇게 HTML Entities를 사용하면 HTML 태그가 포함된 코드도 안전하게 표현할 수 있다.
코드블록에 Syntax Highlighting을 적용하면, 코드를 더욱 이해하기 쉽게 표현할 수 있다. 티스토리는 이를 위해 Prism.js를 지원하고 있다. '꾸미기 > 스킨 편집 > HTML 편집' 메뉴로 가서, Prism.js 관련 코드를 삽입해야 한다. Prism.js의 공식 웹사이트에서 다양한 스타일과 지원하는 언어를 선택해서 코드를 생성할 수 있다.
Prism.js는 사용하기 편리한 구문 강조 라이브러리이다. 복잡한 설정 없이도 소스 코드에 구문 강조를 적용할 수 있어 많은 개발자들이 선호한다. 먼저, Prism.js의 공식 사이트(Prismjs.com)로 이동하여 Download 버튼을 클릭한다. 여기서 원하는 언어와 테마를 선택하면 Prism.js를 다운로드 할 수 있다. 다운로드한 Prism.js 파일을 티스토리 블로그의 '꾸미기 > 스킨 편집 > HTML 편집' 메뉴로 이동해 다음 위치에 삽입한다.
<!-- Head 태그 안에 삽입 --> <head> <!-- 여기에 Prism.js와 Prism.css를 삽입 --> <link href='path-to-prism.css' rel='stylesheet' /> <script src='path-to-prism.js'></script> </head>
Prism.js를 적용한 후에는 코드블록을 작성할 때 pre와 code 태그를 사용하되, code 태그에 class 속성을 추가하여 해당 언어를 명시해준다. 예를 들어, JavaScript 코드를 입력하려면 다음과 같이 작성한다.
<pre><code class='language-javascript'> // 여기에 JavaScript 코드를 입력한다 console.log('Hello, World!'); </code></pre>
이렇게 하면 Prism.js가 자동으로 해당 언어에 맞는 구문 강조를 적용해준다.
티스토리 블로그에서 소스코드를 코드블록으로 넣는 것은 까다로울 수 있지만, 위의 방법을 이용하면 간단하게 할 수 있다. 특히 Prism.js를 이용하면 구문 강조 기능까지 적용할 수 있어 코드를 더욱 명확하고 이해하기 쉽게 표현할 수 있다.
프로그래밍을 공부하거나 개발 관련 블로그를 운영하는 분들은 소스코드를 글에 첨부하는 경우가 많다. 티스토리 블로그에서는 이를 위한 여러 가지 방법이 있다. 이 글에서는 가장 일반적인 방법으로 소스코드를 티스토리 블로그에 코드블록 형태로 삽입하는 방법을 알아보자.
1. 직접 입력하기
티스토리 블로그에서는 기본적으로 <pre><code> 태그를 이용해 코드블록을 만들 수 있다. <pre> 태그는 미리 서식이 지정된 텍스트를 표현할 때 사용하고, <code> 태그는 컴퓨터 코드를 표현할 때 사용한다. 이 두 태그를 함께 사용하면 소스코드를 그대로 보여줄 수 있다.
php<pre><code>
여기에 소스코드를 입력한다
</code></pre>
위와 같이 작성하면 입력한 코드가 그대로 보이게 된다. 하지만 이 방법은 코드에 특수문자가 포함되어 있을 경우 문제가 생길 수 있다. 예를 들어, <나 >와 같은 HTML 태그를 사용하는 코드를 넣으면, 해당 코드가 HTML로 해석되어 보이지 않게 된다.
2. HTML Entities 사용하기
HTML Entities를 사용하면, HTML에서 사용되는 특수문자를 안전하게 표현할 수 있다. <는 <, >는 >로 바꿔서 사용하면 됩니다.
html<pre><code>
<div>Hello, World!</div>
</code></pre>
위와 같이 작성하면 웹브라우저는 HTML 태그로 인식하지 않고 그대로 텍스트로 보여준다. 이렇게 HTML Entities를 사용하면 HTML 태그가 포함된 코드도 안전하게 표현할 수 있다.
3. Syntax Highlighting 사용하기
코드블록에 Syntax Highlighting을 적용하면, 코드를 더욱 이해하기 쉽게 표현할 수 있다. 티스토리는 이를 위해 Prism.js를 지원하고 있다.
'꾸미기 > 스킨 편집 > HTML 편집' 메뉴로 가서, Prism.js 관련 코드를 삽입해야 한다. Prism.js의 공식 웹사이트에서 다양한 스타일과 지원하는 언어를 선택해서 코드를 생성할 수 있다.
4. Prism.js 적용하기
Prism.js는 사용하기 편리한 구문 강조 라이브러리이다. 복잡한 설정 없이도 소스 코드에 구문 강조를 적용할 수 있어 많은 개발자들이 선호한다.
먼저, Prism.js의 공식 사이트(Prismjs.com)로 이동하여 Download 버튼을 클릭한다. 여기서 원하는 언어와 테마를 선택하면 Prism.js를 다운로드 할 수 있다.
다운로드한 Prism.js 파일을 티스토리 블로그의 '꾸미기 > 스킨 편집 > HTML 편집' 메뉴로 이동해 다음 위치에 삽입한다. .
html<!-- Head 태그 안에 삽입 -->
<head>
<!-- 여기에 Prism.js와 Prism.css를 삽입 -->
<link href='path-to-prism.css' rel='stylesheet' />
<script src='path-to-prism.js'></script>
</head>
5. Prism.js를 이용한 코드블록 작성
Prism.js를 적용한 후에는 코드블록을 작성할 때 pre와 code 태그를 사용하되, code 태그에 class 속성을 추가하여 해당 언어를 명시해준다. 예를 들어, JavaScript 코드를 입력하려면 다음과 같이 작성한다.
html<pre><code class='language-javascript'>
// 여기에 JavaScript 코드를 입력한다
console.log('Hello, World!');
</code></pre>
이렇게 하면 Prism.js가 자동으로 해당 언어에 맞는 구문 강조를 적용해준다.
6. 마무리
티스토리 블로그에서 소스코드를 코드블록으로 넣는 것은 까다로울 수 있지만, 위의 방법을 이용하면 간단하게 할 수 있다. 특히 Prism.js를 이용하면 구문 강조 기능까지 적용할 수 있어 코드를 더욱 명확하고 이해하기 쉽게 표현할 수 있다.
-6516936cd8c9d0.33481675.png)