강국 블로그

Color Scripter의 배경색과 스타일을 바꾸고 싶어서 확인해 보았다.

스타일 패키지를 선택해서 간단히 바꿀 수 있다.

추가적인 기능으로 확장 패키지가 있어서 이것을 사용하는 방법을 확인해 보았다.

확장 스토어를 누른다. 

여기서 내가 원하는 스타일 패키지를 선택한다.

나는 추천 스타일패키지에서 "기본패키지" 를 선택하였다. 

다시 편집 페이지로 어떻게 돌아올지 고민했는데...

왼쪽 위의 이미지를 클릭하면 편집 페이지로 돌아온다. 

스타일패키지를 선택하면 내가 확장스토어에서 선택한 패키지가 추가되어 있다.

확장스토어에서 선택한 패키지는 plugin 이라고 표시되어 있다.

여기서 기본패키지 plugin 을 선택.

초기 스타일에서 선택된 스타일로 변경되었다. 

아래는 변경된 스타일패키지를 적용하여 복사한 내용이다.

블로그에 소스 코드를 올리는데 소스 코드가 표시되는 것이 마음에 들지 않았다.

페이지의 전체 폭에 맞게 나와야 일관성이 있는데...

소스 코드의 폭에 맞추어서 블로그에 표시되어 소스 코드가 표시되는 부분이 일관적이지 않고 소스 코드의 폭 길이에 따라 변했다.

아래와 같이 전체 폭에서 코드가 일 부분만 표시되어 있다.

그래서 다른 Highlight code 방식을 찾고 있었는데...

아래 링크를 통해 Color Scripter를 사용하여 소스 코드를 게시할 때 폭을 조절하는 부분을 수정할 수 있었다.

자세한 내용은 아래 링크를 참조~

purplechip.tistory.com/40

스킨 편집 으로 들어가서 CSS 부분을 수정한다.

그런데 위 링크에서 소스를 그대로 가져와서 적용해 보니 내가 쓰는 스킨에서는 적용되지 않았다. ㅡ.ㅡ;

내 스킨에서는 .area_view 부분을 찾을 수 없어서 아래와 같이 수정해 보았다.

그랬더니 소스 코드가 페이지 폭에 맞게 확장되어 표시되었다.

참고로 웹 페이지에서 오른쪽 클릭하여 페이지 소스 보기를 보면 아래와 같이 Color Scripter 부분이 있다.

CSS를 모르겠지만 아래 부분의 class="colorscripter-code" 부분과 관련된 것 같다.

아래에 코드를 추가하였으니 참고하세요.

티스토리의 기본 코드 블럭과 하이라이트가 마음에 들지 않아서

블로그의 소스코드를 이쁘게 구문 강조하기 위해 다른 사람들이 쓰는 것 처럼

Color Scripter를 적용하기로 결정했다.

그런데 내 블로그에 사용하려다 보니 일부 영역 복사 허용이 적용되어 있어서 코드 작성할 때 조금의 작업이 더 필요했다.

참고로 내 블로그에는 아래 내용이 적용되어 있어서 코드를 복사할 수 있게 해 놓았다.

kgkang.tistory.com/123

Color Scripter의 적용 방법은 간단하다.

1. Color Scripter 사이트에 자신의 코드를 쓴다.

colorscripter.com/

2. 왼쪽 아래의 HTML로 복사 버튼을 누른다.

3. 코드 창이 나오면 Ctrl + V (복사)를 한다.

  요즘은 이 창이 뜨면 기본적으로 클립보드에 복사가 되어 있는데 Color Scripter는 그렇지가 않다. 

  반드시 Ctrl + V (복사)를 해 주어야 한다.

4. 티스토리 블로그에서 내용을 작성 후 작성 모드를 변경한다.

  반드시 내용 작성 후 작성 모드를 변경해야 한다. 그리고 HTML 모드로 수정을 완료해야 한다.

  다시 기본모드로 돌아오면 기본모드로 바뀌면서 HTML이 조금 변경되는 경우가 있었다.

5. HTML 모드에서 Color Scripter에서 복사한 내용을 붙여넣기 한다.

6. 보통 여기까지만 하면 된다. 내 블로그의 경우 소스 코드를 복사 가능하도록 하기 위해 코드 태그를 추가한다.

  Color Scripter로 복사된 코드의 첫 부분과 끝 부분에 <code> ... </code> 태그를 추가한다.

7. 마지막으로 완료 버튼을 눌러 글을 등록한다.