티스토리에서 PRE 태그의 문제점

얼마전 자바스크립트로 syntax highlighting 기능을 구현해서 흡족한 마음을 감추기도 전에 삑사리가 발생했다. 코드가 뭉텅이로 잘려나간 것... -_-;;

코드를 검토해보니 티스토리 편집기에서 줄바꿈 문자 뒤에 <BR/> 태그를 덧붙이면서 발생한 것.

엔터 때려넣으면 그 자리를 br 태그로 치환한다.

PRE 태그 안에 <BR/> 이 섞여 있으면 하나의 단일 텍스트가 아니라

"TEXT" + Element + "TEXT" + Element + ...

와 같이 여러개로 child node 가 발생한다.

간단히 파싱할 때 text 가 아닌 노드는 무시함으로써 문제를 해결했다고 좋아했으나 웬걸.. 기존에 작성된 문서들을 수정하고 저장하면 코드의 간격이 계속해서 벌어지는 현상 발생...

이상하다 싶어서 편집기의 모드를 이리저리 바꿔보는데..

전환할때마다 <PRE>태그 내에서 <BR/>이 추가됨.

얼씨구나 위지윅모드와 html 모드를 번갈아 다니며 코드 조각을 작성할때마다 이전에 입력된 코드조각들에 <BR/>이 메뚜기떼처럼 엄청나게 들러붙는것.. 이상하다 싶어서 검색을 해보니 이미 몇년 전부터 불거진 문제였다.

2007년 포럼글...
2008년 포럼글...
2009년 불평과 불만의 하소연...
(기타 등등 무쟈게 많음)

모드를 전환할때마다 PRE 태그내에서 줄바꿈에 <BR/>이 계속 붙는 것이니 자바스크립트로 어떻게 할 수도 없다. 편집 모드 전환을 할때마다 BR이 늘어나고 또 이 BR들 뒤에 줄바꿈 (CR, LF) 문자가 덧붙고 이게 또 BR을 낳고.....무슨 마태복음도 아니고..

이리저리 해결책을 찾아보다 PRE 대신에 TEXTAREA 를 써서 간신히 문제를 해결한 듯... 다행히 TEXTAREA 에 대해서는 모드 전환시에도 BR 태그가 안붙는다.(다행 다행)

PRE 대신에 TEXTAREA로 바꿈

이렇게 해놓고 보니 편집기에서는 아래와 같이 보이는데 좀 어리버리해보여도 그런대로 쓸만한듯....

그나저나 몇년째 계속해서 신고되어온 문제점이 아직도 해결이 안되고 있다니 놀랍다.