SyntaxHighlighter Style 변경하기

이번 포스팅에서는 

SyntaxHighlighter 스타일을 커스텀 

하는 방법에 대해서 포스팅을 해볼 예정입니다.

SyntaxHighlighter  관련 글    - 2018/01/20 - [공부방/티스토리공부] - [티스토리] 소스 코드 가독성을 위한 SyntaxHighlighter 설치

현재 사용하고 있는 스타일인데요.

뭔가 줄 간격도 너무 좁은 것 같고.. 

가독성을 위해 설치 했는데 생각보다 가독성이 좋아보이지 않은 것 같다라는 생각이 듭니다.

그래서 변경을 할 예정입니다.

이번 시간에는 커스텀한 스타일을 공유하는 시간이 아닌

스스로 스타일을 커스텀 하는 방법에 대해서 작성을 해볼까 합니다.

물론 기본적으로 CSS는 알고 있어야 합니다.

모르신다면 습득이 필요합니다^^;;

차근차근 진행해보겠습니다.

ⓐ 크롬에서 F12 키를 누른다

ⓑ 개발자 관리도구 Elements Tab 에서 왼쪽 상단 화사표를 클릭한다.

ⓒ 수정하고 픈 곳을 클릭한다.

ⓓ 개발자 관리도구 Styles Tab에서 수정할 곳을 찾아 원하는 스타일로 변경한다.

가 전부가 되겠습니다.

어렵지 않죠?

전 포스팅을 길게 안쓰고 싶은데.. 

스타일을 더 쉽게 변경 할 수 있는 조그만한 Tip에 대하여 더 적어볼까 합니다.

스타일을 고쳐야 할때. 수정할 수 있는 파일을 알기 위해서는 원하는 스타일이 있는 파일이름 위에 마우스를 올려놓으면 위와 같이

주소가 보이게 되어있습니다.

해당 스타일을 클릭하게 되면 에디트 모드로 변경이 되고 바로 스타일을 적용해 보실 수 있습니다.

참 쉬운 부분인데.. 모르는 분들도 당연히 있을 것 같아 추가적으로 적어봅니다.

이상 포스팅 맞치도록 하겠습니다.