[VuePress] 한글Header 자소분리현상 수정

번역을 위해 VuePress를 활용하여 구성중 한글이 normalize되어 링크가 정상적으로 동작하지 않는 경우가 발생했습니다.

관련되어 수정방법을 공유합니다.

환경

vuepress : 1.8.4

현상

#을 활용한 헤더에 한글이 들어갈 경우 생성되는 Link가 자소분리되어 링크가 정상동작하지 않게 됩니다.

# Compose 목차

<h2 id="compose-ㅁㅗㄱㅊㅏ"><a href="#compose-ㅁㅗㄱㅊㅏ" class="header-anchor">#</a> Compose 목차</h2>

실제로는 잘 보여도 Notepad++와 같은데에서 확인해보면 자소분리가 되어있음을 볼 수 있습니다.

원인

config.js 중 markdown.slugify 에서 사용되는 함수에 NKFD (정규형 호환성 분해(Normalization Form Compatibility Decomposition))를 사용하여 발생하는 현상입니다.

@vuepress/shared-utils/lib/slugify.js 중

....
module.exports = function slugify(str) {
    // Split accented characters into components
    return str.normalize('NFKD')
        // Remove accents
        .replace(rCombining, '')
....

해결방법

다행이 config.js에서 markdown.slugify를 정의할 수 있게 되어있습니다. 그래서 해당 소스를 동일하게 복사하되 normalize를 제외하는 방법으로 해결이 가능합니다.

config.js 중

const rControl = /[\u0000-\u001f]/g;
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’–—<>,.?/]+/g;
const rCombining = /[\u0300-\u036F]/g;
function slugify(str) {
    // Split accented characters into components
    return str
        // Remove accents
        .replace(rCombining, '')
        // Remove control characters
        .replace(rControl, '')
        // Replace special characters
        .replace(rSpecial, '-')
        // Remove continuous separators
        .replace(/\-{2,}/g, '-')
        // Remove prefixing and trailing separators
        .replace(/^\-+|\-+$/g, '')
        // ensure it doesn't start with a number (#121)
        .replace(/^(\d)/, '_$1')
        // lowercase
        .toLowerCase();
};

module.exports = {
    markdown: {
        slugify: slugify
    },
.....