블로그 글을 작성하면서 구글 블로거의 코드 블록 사용에 어려움을 느꼈습니다. 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 || ''; // 언어가 지정되지 않았다면 빈 문자열 사용
code = code.trim();// 코드의 앞뒤 공백 제거
return `${code}
`;
});
}
3. 멀티라인 코드 블록 문제 해결:
한 줄짜리 코드 블록은 잘 작동했지만, 여러 줄로 된 코드 블록에서 문제가 발생했습니다. 이는
와 <p> 태그 때문이었고, 이를 해결하기 위해 1번과 2번의 로직을 결합했습니다.4. 코드 정리:
먼저 1번 방식으로 처리한 후, 불필요한 공백(
)과 태그(<p></p>)를 제거했습니다. 그 후 2번 방식을 적용하여 최종적으로 정확한 형태로 변환되도록 했습니다.text = text.replace(/```(.*?)```/gs, function(match){
match = match.replace(/ /g, ' ');
match = match.replace(/<\/p>/g, '\n');
match = match.replace(/```(\w+)?\s([\s\S]*?)```/g, function(match, lang, code) {
lang = lang || ''; // 언어가 지정되지 않았다면 빈 문자열 사용
code = code.trim(); // 코드의 앞뒤 공백 제거
return `
${code}
`;
});
return match;
});
5. 인라인 코드 블록 추가:
백틱 하나(`)로 시작하는 인라인 코드 블록을 추가했습니다.
text = text.replace(/`(.*?)`/gs, function(match, code) {
return `<code>${code}</code>`;
});
6. 플래그 추가
백틱(`)을 사용하는 동안, 때때로 코드 변환을 원치 않는 상황이 발생할 수 있습니다. 이러한 상황을 위해, 사용자가 스크립트의 자동 변환 기능을 제어할 수 있도록 플래그를 도입했습니다.
if (text.includes("@donotuse")) {
console.log("코드 블록 사용 안 함");
return text; // @donotuse가 있으면 변환 작업을 수행하지 않고 원본 텍스트를 반환
}이 플래그를 사용하고자 할 때는 다음과 같은 방법을 따르면 됩니다:
플래그 사용 방법
- HTML 모드를 열고, 글의 첫 부분에
<div hint="@donotuse"></div>태그를 추가합니다. - 이 태그가 포함된 글에서는 스크립트가 백틱(`)을 인라인 코드 블록으로 자동 변환하지 않습니다.
이 방법을 통해, 사용자는 필요에 따라 코드 블록 변환 기능을 켜거나 끌 수 있습니다. 예를 들어, 백틱을 문장의 일부로 사용하고자 할 때 유용합니다. 이러한 유연성은 사용자가 블로그 콘텐츠를 더 효과적으로 관리할 수 있게 해줍니다.
7. 적용 방법:
변환 함수를 블로그의 메인 콘텐츠에 적용합니다. 페이지에 해당 ID가 있는지 확인한 후, 변환 함수를 적용합니다.
(수정) Blog1으로 할 경우 리스트 에서 예상 못한 코드 블록이 생성되었습니다. id가 post-body로 시작하는 것을 토대로 다시 수정하였습니다.
let postContent = document.querySelectorAll("[id^='post-body-']"); // 포스트 콘텐츠의 ID를 적절히 설정
postContent.forEach(function(element) {
if (element) {
element.innerHTML = convertBackticksToHTML(element.innerHTML);
}
});구글 블로거에 적용하기
1. 레이아웃에 스크립트 추가
- 블로거의 레이아웃 섹션으로 이동하여 HTML/JavaScript 가젯을 추가합니다.
- 아래의 최종 코드를 가젯에 붙여넣고, <script></script> 태그로 감싸 올바르게 실행되도록 합니다.
- 저장 후, 블로그 포스트를 작성할 때 이 스크립트가 자동으로 백틱 기반의 코드 블록과 인라인 코드를 HTML 형식으로 변환합니다.
<script>
function convertBackticksToHTML(text) {
if (text.includes("@donotuse")) {
console.log("코드 블록 사용 안 함");
return text; // @donotuse가 있으면 변환 작업을 수행하지 않고 원본 텍스트를 반환
}
// Block code block with ```
text = text.replace(/```(.*?)```/gs, function(match){
match = match.replace(/ /g, ' ');
match = match.replace(/<\/p><p>/g, '\n');
match = match.replace(/```(\w+)?\s([\s\S]*?)```/g, function(match, lang, code) {
lang = lang || ''; // Use an empty string if no language is specified
code = code.trim(); // Trim the code
return `<pre><code class="${lang}">${code}</code></pre>`;
});
return match;
});
// Inline code block with `
text = text.replace(/`(.*?)`/gs, function(match, code) {
code = code.trim(); // Trim the code
return `<code>${code}</code>`; // Replace with <code> tags
});
return text;
}
let postContent = document.querySelectorAll("[id^='post-body-']"); // 포스트 콘텐츠의 ID를 적절히 설정
postContent.forEach(function(element) {
if (element) {
element.innerHTML = convertBackticksToHTML(element.innerHTML);
}
});
</script>
2. CSS 스타일링 추가:
사용자 경험을 향상시키고 코드 블록의 시각적 표현을 개선하기 위해, 사용자의 선호에 따라 CSS 스타일링을 추가하는 방법을 소개합니다. highlight.js 라이브러리를 활용하면 다양한 테마 중에서 선택하여 사용자의 블로그 디자인에 맞게 코드 블록 스타일을 조정할 수 있습니다.
Highlight.js 테마 선택
- highlight.js에서 제공하는 다양한 디자인 중에서 선택할 수 있습니다.
- highlight.js 데모 페이지에서는 다양한 언어로 코드를 작성하며 테마를 시험해 볼 수 있습니다.
- highlight.js 예시 페이지를 통해 모든 언어에 대한 테마 적용 예시를 볼 수 있습니다. 저는 `arduino-light` 테마를 선택했습니다.
CDN 코드 적용
- Highlight.js의 공식 사이트에서 CDN 코드를 복사하거나 아래의 코드를 복사하여, `default` 부분을 선택한 테마 이름으로 변경합니다.
- 블로거 메뉴에서 '테마'를 선택하고 'HTML 편집'을 클릭한 다음, `<head>` 태그 사이에 위의 CDN 코드를 붙여넣습니다.
<!--Highlight.js 시작-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/(선택한테마명).min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!--Highlight.js 종료--> 블로거 메뉴에서 '테마'를 선택하고 'HTML 편집'을 클릭하여, <head> 태그 사이에 위의 CDN 코드를 붙여넣습니다.
인라인 코드 블록 스타일 추가:
- 인라인 코드 블록에 대한 스타일링도 커스텀으로 진행했습니다.
- 노션(Notion) 스타일을 참조하여 색상을 맞춘 스타일을 준비했습니다. 사용자는 원하는 CSS를 선택하거나 직접 커스텀하여 사용할 수 있습니다.
/* 코드 블록 CSS 수정 */
@font-face {
font-family: 'D2Coding';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
font-weight: normal;
font-style: normal;
}
pre code {
font-size: 14px;
padding: 20px;
font-family: D2Coding, SF Mono, Menlo, Consolas, Monaco, monospace;
border: solid 1px #ebebeb;
line-height: 1.71;
overflow: auto;
}
code {
padding: 0.25rem;
border: solid 1px #ebebeb;
color: #00979d;
border-radius: 5px;
font-size: 0.9rem;
line-height: 1.1rem;
margin: 0 5px;
font-family: D2Coding, SF Mono, Menlo, Consolas, Monaco, monospace;
}
/* 노션 스타일 인라인 코드 블록 */
code {
padding: 0.25rem;
background-color: #EDEDEB;
border: 1px solid #dadada;
color: #EB5757;
border-radius: 5px;
font-size: 0.9rem;
line-height: 1.1rem;
margin: 0 5px;
}
이제 구글 블로거에서 마크다운 스타일의 코드 블록과 인라인 코드를 쉽게 추가하고, highlight.js를 이용해 멋진 스타일을 적용할 수 있습니다. 이런 개선을 통해 블로그의 기술적 컨텐츠가 더욱 돋보일 것입니다. 간단한 스크립트와 CSS 조정만으로도 사용자의 블로깅 경험이 크게 향상될 것입니다. 이제 이 기능들을 활용해 블로그를 더욱 풍부하고 전문적으로 만들어보세요.
댓글
댓글 쓰기