강국 블로그

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

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

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

확장 스토어를 누른다. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

purplechip.tistory.com/40

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

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

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

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

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

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

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