구글블로그 깔끔 소스코드정리 (Color Scripter)

기존에 먼저 블로그 포스팅에서 소개시켜드린 (Color Scripter 블로그포스팅) 에서 기존 네이버 블로그에서는 발생하지 않았던 이상현상 해결법 겸으로 포스팅 합니다.

블로그 글쓰기시에는 Color Scripter 에서 코드를 복사한 내용은 정상적으로 표현되고 있습니다.

그러나, 실제로 포스팅 후에는 각 라인별로 줄간격이 원하는 형식처럼 노출되지 않고 있습니다.
다른 블로그 소스코드 적용하는 코드들도 존재하지만, 간단하게 사용하기에는 Color Scripter가 좋다고 판단하여, 블로그 작성시 표현을 다시 원래대로 돌리는 방법에 대해 설명하려고 한다.

https://colorscripter.com/ 해당 Site를 통해서 소스코드를 입력한뒤, [세부설정] 메뉴를 통해 기타 > HTML태그 자체 복사를 체크 후 저장하여, [클립보드에 복사] 합니다.

다소 불편하지만, 블로그에 추가하기전에 1가지 작업이 추가되었습니다. 저는 Sublime Text를 통해, 해당 HTML을 붙여넣고, "white-space:pre" -> "white-space:nowrap" 으로 강제 치환 해줍니다.

pre, nowrap 외에도 속성값은 더 있으며, 참고용으로 적어놓는다. (필자는 Objective C, Swift 언어를 주로 하다보니 속성이 정확히 어떤값인지 몰라서 이참에 찾아보았다.)

white-space

내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정한다.

속성값

• normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다.
• nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다.
• pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다.
• pre-line : 줄 바꿈 시퀀스가 유지된다.
• pre-wrap : 줄 바꿈 시퀀스가 축소된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

위에 HTML Replace 한 값을 글쓰기 -> HTML 부분의 원하는 위치에 삽입 해주고, 글쓰기 탭으로 보면 글쓰기 할 때와 포스팅 했을 때 두 값이 정상적으로 노출되는것이 확인 된다.

글쓰기시

포스팅 후

저와 같은 현상을 겪고 있으신 분들은 참고해주시기 바랍니다.