티스토리 블로그에서 리눅스터미널 창 형식으로 표현하기

저는 주로 리눅스 환경에서 개발을 하고 있고, 필요 시 이에 관련된 내용을 티스토리에 포스팅을 하고 있습니다.

그러다 보니 리눅스 상에서 실행한 내용을 포스트에 삽입할 때, 시각 효과를 키우기 위해 리눅스터미널 창 형식으로 표현할 필요가 있습니다.

 

이 글에서는 티스토리 블로그에 특정 내용(문자열로 이루어진)을 리눅스터미널 창 형식으로 표현하는 방법을 기술합니다.

 

예를 들어 저는 리눅스터미널 창에서 arm-fsl-linux-gnueabi-gcc라는 파일을 실행하였고, 해당 파일이 없다는 경고가 표시되었습니다. 

이런 내용을 단순히 텍스트로 작성하면 다음과 같이 작성할 수 있을 것입니다.

$ ./arm-fsl-linux-gnueabi-gcc 
-bash: ./arm-fsl-linux-gnueabi-gcc: 그런 파일이나 디렉터리가 없습니다

 

이제, 이 글에서 설명하는 방법을 적용하면 아래처럼 표시할 수 있습니다. 

(아래 화면은 그림을 삽입한 것이 아니라, 이 글에서 설명하고자 하는 방법을 적용하여 표현한 것입니다.)

$ ./arm-fsl-linux-gnueabi-gcc

-bash: ./arm-fsl-linux-gnueabi-gcc: 그런 파일이나 디렉터리가 없습니다.

 

이는 cssterm이라는 것을 사용하여 실행할 수 있으며, 방법은 다음과 같습니다.

 

 

1. cssterm 파일을 다운로드 합니다.

 

https://github.com/nstephens/cssterm/tree/8f84e1d0888c7cbe886e7a46995194a0d51b197c

 

 

위 링크에서 cssterm을 다운로드합니다. Code 버튼을 클릭해서 ZIP 압축 파일을 다운로드하고 압축을 해제합니다.

 

 

 

 

 

2. 티스토리 블로그에 파일을 업로드합니다.

 

다운로드한 파일의 압축을 해제하면 css 폴더와 scripts 폴더가 있습니다. 

css 폴더 내의 cssterm.css 파일과 scripts 폴더 내의 cssterm.js 파일을 티스토리 블로그에 업로드합니다.

 

파일을 업로드하기 위해 블로그 관리 페이지에서 "스킨 편집" → "html 편집" 메뉴로 들어 갑니다.

 

 

 

 

"파일업로드" 탭으로 이동 후 "추가" 버튼을 클릭하여 PC에 저장되어 있는 cssterm.css 파일과 cssterm.js 파일을 업로드합니다.

 

 

 

3. 블로그 페이지의 HTML 코드를 수정하여 cssterm 기능을 추가합니다.

 

2번 절차에서 진행했던 "파일업로드" 탭에서 "HTML" 탭으로 이동합니다.

 

 

아래의 HTML 코드를 블로그 페이지 HTML 코드의 제일 아랫 부분 </body> 태그와 </html> 태그 사이에 추가합니다.

<!-- linux terminal style -->
<link rel="stylesheet" type="text/css" href="./images/cssterm.css">
<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
<script src="./images/cssterm.js"></script>
<!-- linux terminal style -->

 

추가한 후 우측 상단의 적용 버튼을 클릭하여 적용을 완료합니다.

 

 

 

4. 원하는 부분에 효과를 적용합니다.

 

블로그에 리눅스터미널 창 형태로 표시할 내용을 작성합니다. 서두에서 예시로 들었던 내용을 사용하겠습니다.

$ ./arm-fsl-linux-gnueabi-gcc 
-bash: ./arm-fsl-linux-gnueabi-gcc: 그런 파일이나 디렉터리가 없습니다

 

이제, 포스트 작성 화면의 우측 상단 메뉴에서 "기본모드"를  "HTML"로 변경하여 HTML 코드 편집 모드로 전환합니다.

 

리눅스터미널 창 형식으로 표현할 내용을 <div class="cssterm"> </div> 태그로 다음과 같이 감싸 줍니다.

<div class="cssterm">
<p>$ ./arm-fsl-linux-gnueabi-gcc</p>
<p>-bash: ./arm-fsl-linux-gnueabi-gcc: 그런 파일이나 디렉터리가 없습니다.</p>
</div> 

 

완성되었습니다. 포스트를 발행하면, 아래와 같이 표시되는 것을 확인할 수 있습니다.

$ ./arm-fsl-linux-gnueabi-gcc

-bash: ./arm-fsl-linux-gnueabi-gcc: 그런 파일이나 디렉터리가 없습니다.

---

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음