[블로그] 티스토리 코드블럭 테마 적용하기

블로그에 글을 쓸 때 코드 관련 정보를 많이 올리는데,

평소엔 티스토리에서 제공하는 코드블럭을 사용해서 글을 올렸다.

기존 코드블럭도 그냥 소스 올리기보다는 깔끔하게 올라가긴 하지만,

가끔 줄도 틀릴 때도 있고, 색깔이나 지정 못하는 것들이 있어서 아쉬웠다.

 

그래서 이제부턴 코드를 좀 더 깔끔하게 올리기 위해서 코드 올리는 방법을 찾아봤다.

 

1.https://colorscripter.com/

위 사이트에 접속하면 아래와 같은 화면을 볼 수 있다.

아래에 사용된 소스는 react-tutorial의 일부 소스입니다.

Color Scripter 사이트

해당 사이트에서 소스코드를 작성하고,

우측 하단의 "HTML로 복사" 또는 "클립보드에 복사" 버튼을 클릭해서 코드를 복사하면 된다.

복사된 코드를 티스토리에서 "기본모드" 말고 "HTML"모드에서 붙여 넣기 하면 아래와 같이 작성된다.

class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {/* TODO */}
        </button>
      );
    }
  }

위 코드가 검은색인 이유는 스타일 패키지를 "서브라임 블랙"으로 바꾼 모습이다.

 

그리고 기존의 코드블럭을 사용한다면 아래와 같이 작성된다.

class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {/* TODO */}
        </button>
      );
    }
  }

편하게 코드블럭을 사용할 수 도 있지만,

취향에 따라서 다른 테마를 적용해도 좋을 것 같다.