Prismjs를 사용하여 Gridsome에 코드 강조 표시를 추가하는 방법

소개하다.
개발자로서 우리는 어떤 일을 어떻게 하는지 설명하기 위해 다른 개발자와 코드를 공유해야 한다는 것을 자주 발견한다.따라서 개발자의 우호적인 방식으로 코드를 표시하는 것이 중요하다.한 가지 방법은 사용Prismjs이다.
비록 우리는 처음부터 PRISMJ를 사용할 수 있지만, 우리는 이미 PRISMJ와 Gridsome을 통합하는 후속 작업을 완성했다.@grisome/remark-prismjs가 이미 존재하기 때문에 코드의 하이라이트 디스플레이를 추가하는 것은 매우 간단하다.그러나 그것도 나름대로의 문제가 있다.이것이 바로 내가 이 안내서를 쓴 이유는 네가 함정을 피하기 위해서이다.

층계

설치

Prismjs 테마 추가

gridsome 설정에 플러그인 추가

장치
설치@gridsome/remark-prismjs와prismjs 테마가 필요합니다.테마에 대해 공식적인 Primsjs 테마를 사용하지만 원하는 테마를 사용할 수 있습니다.사실 너는 심지어 스스로 쓸 수 있다😉;npm install prismjs @gridsome/remark-prismjs
Prismjs 주제 추가
prismjs에서 테마를 선택하십시오.모르면 node_modules 폴더를 열고 PrismJ를 검색하십시오.주제를 선택합니다.그런 다음 파일을 가져옵니다main.js.아니면기본 SASS 스타일시트를 가져올 수 있습니다(SASS를 사용하는 경우).

//main.js

import 'prismjs/themes/prism.css'

// Prismjs Comes With Other themes. For example, prism-solarizedlight.css'

gridsome 설정에 플러그인 추가하기gridsome.config.js에서prismjs 플러그인을 사용하는gridsome 비고 플러그인에 추가합니다.@gridsome/mjs의 공식 문서에서 @gridsome/source 파일 시스템을 사용합니다.프로젝트에서 @gridsome/vue 평론 플러그인을 사용합니다.따라서 이 설명서에서 사용할 내용입니다.
@gridsome/vue 비고 옵션의plugin 부분에서prismjs 플러그인을 그룹에 추가합니다.

//gridsome.config.js

module.exports = {
    siteName: 'Site Name',
    plugins: [
        {
            use: '@gridsome/vue-remark',
            options: {
                typeName: 'Post',
                baseDir: './src/posts',
                pathPrefix: '/post',
                template: './src/templates/Post.vue',,
                plugins: ['@gridsome/remark-prismjs'],
            },
        },
    ]
}

이렇게이것은gridsome에 코드 문법의 하이라이트를 추가하는 간단한 방법입니다.
이제 우리가 당신이 직면할 수 있는 함정을 처리하고 가능한 해결 방안을 제시합시다.

공통 문제 처리

1. 내 코드 블록이 강조 표시되지 않았다
이것은 통상적으로 네가 무엇을 잘못했는지 나타낸다.prismjs 테마를 추가하지 않았거나, 잘못된 곳에 prismjs 플러그인을 추가했을 수도 있습니다.이것들은 모두 범하기 쉬운 실수들이야, 나도 스스로 범한 적이 있어.
예를 들면, 너는 이미 이렇게 했을 것이다👇🏾.

//  ❌❌❌❌❌
{
    use: '@gridsome/vue-remark',
    options: {
        typeName: 'Post',
        baseDir: './src/posts',
        pathPrefix: '/post',
        template: './src/templates/Post.vue',
    },
    plugins: ['@gridsome/remark-prismjs'], // this is wrong
}

//✅✅✅✅✅

{
    use: '@gridsome/vue-remark',
    options: {
        typeName: 'Post',
        baseDir: './src/posts',
        pathPrefix: '/post',
        template: './src/templates/Post.vue',,
        plugins: ['@gridsome/remark-prismjs'], // This is Correct
    },
}

2. 새 소스 코드를 추가했습니다. 현재 코드가 밝아서 작업이 중단되었습니다.
통상적으로, 우리는 이후에 또 다른 가격 인하 원천을 추가해야 할 수도 있다.그러나 일단 우리가 이렇게 한다면, 우리의 기존 코드는 중단될 것이다.우리는 우리가 무슨 잘못을 저질렀는지 생각할 수 있다.그러나 믿든 안 믿든 네가 맡아, 네가 아니야.이것이 @gridsome/vue 평론 플러그인의 작업 방식입니다.
문제는 @gridsome/vue remark 플러그인은 마지막 원본의 플러그인 설정만 받아들일 수 있습니다.이것은 블로그 게시물에 사용되는 두 개의 가격 인하원이 있고, 탭에 사용되는 두 개의 가격 인하원이 있다면, 마지막 원본 플러그인만 사용할 수 있다는 것을 의미한다.
@gridsome/vue remark는 구축할 때 모든 원본에 플러그인 설정만 사용하는 것 같습니다.이런 행위는 문서에 구체적으로 설명되지 않았기 때문에, 나는 단지 Grisome의 Github 페이지에서 토론에서 발견한 것이다.kai-oswald 이러한 행위를 관찰하고 해결 방안을 제공했다.자세한 내용here.
이런 지식이 있으면 효과적인 해결 방안이 가능하다.모든 플러그인을 플러그인 목록의 마지막 @gridsome/vue 비고원에 추가하기만 하면 됩니다.
우리 아래의 예에서👇🏾, 태그 소스에 @gridsome/remark prismjs 플러그인을 추가합니다.

//gridsome.config.js

module.exports = {
    siteName: 'Site Name',
    plugins: [
        {
            use: '@gridsome/vue-remark',
            options: {
                typeName: 'Post',
                baseDir: './src/posts',
                pathPrefix: '/post',
                template: './src/templates/Post.vue',,
            },
        },
        {
            use: '@gridsome/vue-remark',
            options: {
                typeName: 'Tag',
                baseDir: './src/tags',
                pathPrefix: '/tag',,
                template: './src/templates/Tag.vue',,
                plugins: ['@gridsome/remark-prismjs'],
            },
        },
    ]
}

이제 될 것 같은데.

3. @gridsome/remark prismjs에 옵션을 추가하고 싶은데 어떻게 해야 할지 모르겠어요.
마찬가지로 @gridsome/vue remark의 공식 문서에는 옵션을 받아들인 플러그인에 전달하는 방법이 표시되지 않습니다.그러나 우리는 다른 곳에서 이를 어떻게 할 것인가에 대한 단서를 얻었다.이러한 위치는 Gridsome's Github page by kai-oswald, gridsome-plugin-remark-codetitle Plugin page 및 gridsome-plugin-remark-shiki Plugin page에 있습니다.
플러그인을 추가하고 싶다면, 형식은 두 가지 방법 중 하나입니다. 옵션을 원하느냐에 따라 달라집니다.

옵션 없는 플러그인

옵션이 포함된 플러그인

1. 옵션 없는 플러그인
플러그인의 이름을 플러그인 그룹 옵션의 항목으로 전달합니다.

// Plugins WITHOUT Options
{
    plugins: ['plugin-1', 'plugin-2']
}

2. 옵션이 있는 플러그 인
모든 플러그인은 플러그인 그룹 옵션에 하나의 그룹으로 열거되어 있습니다.그룹 중 첫 번째 항목은 플러그인 이름이고, 두 번째 항목은 옵션 대상입니다.

// Plugins WITH Options
{
    plugins: [['plugin-1', {'options...'}], ['plugin-2', {'options...'}],...]
}

예를 들어, 만약 우리가 내연 코드의 하이라이트 디스플레이 (기본적으로 사용하지 않음) 를 사용하려면 transformInlineCode 를 true 옵션스 대상에 전달해야 한다.

// Enabling inline code highlighting using options

{
    use: '@gridsome/vue-remark',
    options: {
        typeName: 'Post',
        baseDir: './src/posts',
        pathPrefix: '/post',
        template: './src/templates/Post.vue',,
        plugins: [
            [
                '@gridsome/remark-prismjs',
                {
                    transformInlineCode: true,
                },
            ],
        ],
    },
},

결론
이것이 바로 코드 하이라이트 디스플레이를 프로젝트에 추가하는 방법입니다.축하드립니다.🙂

도구책

vue-remark issues with remark plugins

Vue Remark

gridsome-plugin-remark-shiki

원본: https://dev.collinslagat.com/wiki/vue/how-to-add-code-highlighting-to-gridsome-using-prismjs/