본문 바로가기
티스토리

[ 티스토리 - Tip ] - 코드블럭 활용하기

by 안드레날린 2021. 9. 25.

코드블럭 적용하기

글쓰기 모드에서 아래의 그림과 같이 "더보기" 클릭 후 "<> 코드블럭"을 선택하면 된다.

더보기 클릭 시 나타나는 더보기 메뉴이다.

 

실제 코드를 작성할 수 있는 창이 나타나면 원하는 언어를 선택하고 코드를 작성하면 된다.

코드블럭을 선택하면 원하는 언어를 선택하고 실제 코드를 작성할 수 있는 팝업 창이 나타난다.

 

 

Syntax Highlight 플러그인 적용하기

Syntax Highlight 플러그인을 적용하지 않은 상태로 글을 게시하면 아래 그림과 같이 글이 게시된다. 글을 작성할 당시에는 이쁘게 보였을지 몰라도 실제로 글을 게시하게 되면 아래와 같이 나타난다. 따라서 Syntax Highlight 플러그인은 필수로 적용해야 한다.

Syntax Highlight 플러그인을 적용하지 않고 글을 게시한 화면

 

Syntax Highlight 플러그인은 아래와 같이 적용할 수 있다.

블로그 관리 페이지에 접속 -> "플러그인" 메뉴를 클릭 -> "코드" 검색

관리 페이지 접속 후 플러그인 메뉴 클릭

 

플러그인 검색창에 "코드"를 검색하여 Syntax Highlight 플러그인이 검색된 화면

 

미리보기가 제공지 않는 단점이 있어 언어 별로 디자인 샘플을 살펴 보면 아래와 같다. (html, C, Java, Bash)

Atom One Dark
Atom One Light

 

Darcula

 

Github

 

Monokai

 

Visual Studio

 

Xcode

 

Atom One Dark 디자인 테마를 적용한 실제 코드블럭 이다.

<!DOCTYPE html>

<html>
<head>
<title>Hello World Title</title>
</head>
<body>
Hello World
</body>
</html>

 

#include <stdio.h>

int main(void)
{
	printf("Hello World\n");
}

 

public class Hello
{
    public static void main(String[] args)
    {
        System.out.println("Hello World");
    }
}

 

#!/bin/bash

while true
do
echo "Hello World"
sleep 1
done;

 

'티스토리' 카테고리의 다른 글

inode Number로 파일 삭제  (0) 2013.02.22
프로그램 추가/제거 목록 삭제  (0) 2013.02.22