Notion 코드 블록 이슈 개선

작성일: 2023-10-23

Prerequisite

  • Jekyll Theme 로컬 환경 구축

Notion 코드 블록 이슈

블로그 배포 후 Notion 코드 블록 중 아래와 같이 특정 문자가 있으면 다르게 동작하는 것을 확인했습니다.

배포 전 (Notion 원본)

배포 후 (블로그)

Notion 원본글에 있는 특정 문자가 배포 후에는 해당 정보가 사라져있었습니다.

확인해보니 Jekyll 빌드 시 코드로 동작하는 scope라는 것을 확인하고, just-the-docs 예제에서 해당 문자를 사용하는 방법을 저장소에서 확인했습니다.

위의 방법대로 코드 블록 전, 후로 raw, endraw를 붙여주어야 정상 작동한다는 것을 확인하고, Notion API 호출 후 가져오는 내용에 코드 블록 escape function을 추가했습니다.

_scripts/notion-import.js

해당 스크립트 실행 후 코드 블록 전, 후로 escape 코드가 추가된 것을 확인하였고 배포 후에도 정상적으로 보여지는 것을 확인했습니다.