코딩의 섬, 코코섬

블로그 글을 작성하면서 구글 블로거의 코드 블록 사용에 어려움을 느꼈습니다. HTML 모드로 전환하여 <pre><code></code></pre> 태그를 사용하는 방식은 번거롭고 혼란스러웠습니다. 이를 개선하고자 마크다운 스타일의 백틱(```)을 사용하여 코드 블록을 쉽게 만들 수 있는 방법을 고안했습니다. 배경 기술 이 포스팅은 구글 블로거에서 마크다운 스타일의 코드 블록과 highlight.js를 활용하여 사용자 경험을 향상시키는 데 중점을 두었습니다. 마크다운은 간편한 문서 작성을 가능하게 하는 도구이며, highlight.js는 코드에 색상을 추가해 가독성을 높이는 라이브러리입니다. 이러한 기술을 결합함으로써, 블로거들은 코드를 쉽게 삽입하고 스타일링할 수 있으며, 독자들은 깔끔하고 전문적인 블로그 포스트를 경험할 수 있습니다. 구현 방법 1. 백틱 변환 함수 개선:  백틱(```)으로 시작하고 끝나는 부분을 <pre><code></code></pre> 로 변환하는 기능을 구현했습니다. 정규 표현식을 활용해 백틱으로 둘러싸인 부분을 찾고 변환합니다. function convertBackticksToHTML(text) { return text.replace(/```(.*?)```/gs, " $1 "); } 2. 언어 특정 클래스 추가:  마크다운에서 특정 언어를 지정하는 것처럼, 예를 들어 ```sql 처럼 입력하면 SQL 형식으로 표시되도록 개선했습니다. 이를 위해 정규 표현식을 조정하여 언어에 맞는 클래스를 추가했습니다. function convertBackticksToHTML(text) { return text.replace(/```(\w+)?\s([\s\S]*?)```/g, function(match, lang, code) { lang = lang || ''; // 언어가...