PWA

ChatGPT에게 물었습니다. Code Highlight

그랜파 개발자 2024. 7. 9. 23:40

Markdown Editor를 만들었습니다.

Vue를 사용하여 markdown editor 사용 예제를 만들어줘.

예제 속에 hightlight.js가 사용되었지만 이것이 뭔지 모르겠습니다.

3. ChatGPT에게 물었습니다.

hightlight.js 란?

 

highlight.js는 웹 페이지에서 코드 구문을 하이라이트(강조)하기 위한 자바스크립트 라이브러리입니다. 다양한 프로그래밍 언어를 자동으로 인식하고, 그에 맞는 색상과 스타일을 적용해 코드의 가독성을 높여줍니다. 주로 블로그나 문서 사이트, 개발자 포털 등에서 코드 예제를 보기 좋게 표시하기 위해 사용됩니다.

주요 기능과 특징은 다음과 같습니다:

  1. 자동 언어 감지: highlight.js는 코드를 자동으로 분석해 어떤 언어인지 감지하고, 해당 언어의 구문에 맞게 하이라이트합니다.
  2. 다양한 언어 지원: 수십 개의 프로그래밍 언어와 마크업 언어를 지원합니다.
  3. 다양한 스타일 테마: 여러 가지 미리 정의된 테마를 제공하여 코드 하이라이트 스타일을 쉽게 변경할 수 있습니다.
  4. 사용이 간편함: 간단한 설정과 함께 HTML 페이지에 포함시키기만 하면 쉽게 사용할 수 있습니다.

사용 예시는 다음과 같습니다:

HTML 페이지에 highlight.js를 포함하고, 코드를 하이라이트하기 위한 간단한 설정입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight.js Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>
<body>
    <pre><code class="language-javascript">
        // Example JavaScript code
        function helloWorld() {
            console.log('Hello, world!');
        }
        helloWorld();
    </code></pre>
</body>
</html>

 

위의 예제에서는 highlight.js와 스타일시트를 HTML에 포함시키고, <script>hljs.highlightAll();</script>를 통해 페이지 로드 시 모든 코드 블록을 자동으로 하이라이트하도록 설정했습니다. class="language-javascript" 속성을 사용해 코드 블록의 언어를 지정할 수도 있습니다.

 

화면으로 확인해 봤습니다.

ChatGPT에게 물었습니다.

Vue에서의 hightlight.js의 사용예제를 보여줘.

 

highlight.js를 Vue.js 프로젝트에서 사용하는 방법을 설명하겠습니다. Vue 컴포넌트 내에서 highlight.js를 사용하여 코드 구문을 하이라이트하는 예제를 보여드리겠습니다.

1. 프로젝트 설정

우선, highlight.js를 설치합니다. npm을 사용하여 설치할 수 있습니다.

npm install highlight.js

2. Vue 컴포넌트에서 highlight.js 사용

Vue 컴포넌트 내에서 highlight.js를 사용하여 코드를 하이라이트하는 방법을 보여드리겠습니다. 컴포넌트가 마운트된 후 코드 블록을 하이라이트하도록 설정합니다.

<template>
  <div>
    <pre><code ref="codeBlock" class="language-javascript">
      // Example JavaScript code
      function helloWorld() {
        console.log('Hello, world!');
      }
      helloWorld();
    </code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // 스타일시트를 import 합니다.

export default {
  name: 'CodeHighlight',
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
    }
  }
};
</script>

<style>
/* 추가적인 스타일을 정의할 수 있습니다 */
</style>

 

위의 예제에서 Vue 컴포넌트를 생성하고, mounted 라이프사이클 훅에서 highlightCode 메서드를 호출하여 highlight.js를 통해 코드를 하이라이트합니다. ref 속성을 사용하여 코드 블록을 참조하고, highlightBlock 메서드를 호출하여 해당 블록을 하이라이트합니다.

3. 다양한 언어와 테마 사용

highlight.js는 다양한 언어와 테마를 지원하므로 필요에 따라 다른 스타일시트를 import하거나 여러 언어를 지원할 수 있습니다. 예를 들어, 다른 테마를 사용하고 싶다면 default.css 대신 원하는 테마를 import하면 됩니다.

import 'highlight.js/styles/monokai-sublime.css';

 

위와 같은 방식으로 다양한 테마를 적용할 수 있습니다.

4. 동적으로 하이라이트 업데이트

만약 코드 블록이 동적으로 변경될 경우, 코드가 변경될 때마다 하이라이트를 업데이트할 필요가 있습니다. 이를 위해 watch 옵션을 사용할 수 있습니다.

<template>
  <div>
    <pre><code ref="codeBlock" class="language-javascript">{{ code }}</code></pre>
    <button @click="updateCode">Update Code</button>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';

export default {
  name: 'CodeHighlight',
  data() {
    return {
      code: `// Example JavaScript code
function helloWorld() {
  console.log('Hello, world!');
}
helloWorld();`
    };
  },
  watch: {
    code() {
      this.highlightCode();
    }
  },
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
    },
    updateCode() {
      this.code = `// Updated JavaScript code
function newFunction() {
  console.log('Code updated!');
}
newFunction();`;
    }
  }
};
</script>

<style>
/* 추가적인 스타일을 정의할 수 있습니다 */
</style>

 

이 예제에서는 code 데이터 속성을 동적으로 변경하고, watch를 사용하여 code가 변경될 때마다 highlightCode 메서드를 호출하여 하이라이트를 업데이트합니다. 이렇게 하면 Vue.js와 highlight.js를 사용하여 코드 구문을 쉽게 하이라이트할 수 있습니다.

ChatGPT가 시키는 대로 해 봤습니다.

1. Vue CLI 설치

npm install -g @vue/cli

 

2. Vue Project 만들기

vue create highlight-code

? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, PWA, Router, Vuex ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) n

 

3. 프로젝트 설정

cd highlight-code npm install highlight.js

 

4. Vue 컴포넌트에서 highlight.js 사용

CodeView.vue

 

 

5. App.vue 수정

 

6. 개발서버에서 실행

npm run serve 브라우저를 열어 http://localhost:8080에 접속

 

 

7. 동적으로 하이라이트 업데이트

CodeView.vue 수정

 

수정 후 http://localhost:8080 확인

 

‘Update Code’ 클릭하면 ‘Element previously highlighted. To highlight again, first unset ‘dataset.highlighted'' 메시지 출력됨

 

8. ChatGPT에게 물었습니다.

vue 코드인데 hljs.highlightBlock(codeBlock)를 해제 하는 방법은?
It is a vue code, how to release hljs.highlightBlock(codeBlock)?

 

To handle re-highlighting a code block in a Vue.js component using Highlight.js, you can follow a similar approach as described earlier but adapted to Vue's lifecycle and reactivity system. Here’s how you can implement it: Remove existing Highlight.js classes and markup: Reset the element by removing Highlight.js-specific classes and span elements. Reapply the highlighting: After the reset, call hljs.highlightBlock again.

Highlight.js를 사용하여 Vue.js 구성 요소에서 코드 블록을 다시 강조 표시하려면 앞에서 설명한 것과 유사한 접근 방식을 따르지만 Vue의 수명 주기 및 반응성 시스템에 맞게 조정할 수 있습니다. 구현 방법은 다음과 같습니다.

기존 하이라이트.js 클래스 및 마크업 제거: 하이라이트.js 관련 클래스 및 span 요소를 제거하여 요소를 재설정합니다. 하이라이트 다시 적용: 재설정 후 'hljs.highlightBlock'을 다시 호출하세요.

 

Vue Component Example Vue 구성 요소 예

 

<template>
  <div>
    <pre><code ref="codeBlock" class="html">
      &lt;!-- Example HTML code --&gt;
      &lt;div&gt;Hello, world!&lt;/div&gt;
    </code></pre>
    <button @click="rehighlightCode">Rehighlight Code</button>
  </div></template>

<script>import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';

export default {
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
    },
    removeHighlighting(element) {
      // Remove the hljs class from the element
      element.classList.remove('hljs');

      // Create a temporary element to hold the plain text
      const tempElement = document.createElement('div');
      tempElement.innerHTML = element.innerHTML;

      // Get all the span elements and unwrap their content
      const spans = tempElement.querySelectorAll('span');
      spans.forEach(span => {
        span.replaceWith(document.createTextNode(span.textContent));
      });

      // Set the cleaned content back to the code block
      element.innerHTML = tempElement.textContent;
    },
    rehighlightCode() {
      const codeBlock = this.$refs.codeBlock;

      // Remove existing highlighting
      this.removeHighlighting(codeBlock);

      // Reapply Highlight.js
      hljs.highlightBlock(codeBlock);
    }
  }
};
</script>

 

9. CodeView.vue 수정했습니다.

위에 알려준 코드 중 removeHighlighting(element) 를 적용했습니다.

 

 

여전히 같은 에러가 발생합니다. ‘Element previously highlighted. To highlight again, first unset ‘dataset.highlighted.'' 메시지 출력됨

 

10. 다시 ChatGPT에게 물었습니다.

hljs.highlightBlock(codeBlock) 실행 후 data-highlighted 속성을 제거하는 방법은?

 

To remove the data-highlighted attribute after running hljs.highlightBlock(codeBlock);, you can do it directly by deleting the attribute from the element. Here's how you can integrate this into your Vue component:

hljs.highlightBlock(codeBlock);을 실행한 후 data-highlighted 속성을 제거하려면 요소에서 속성을 삭제하여 직접 수행할 수 있습니다. 이를 Vue 구성 요소에 통합하는 방법은 다음과 같습니다.

 

Updated Vue Component Example 업데이트된 Vue 구성 요소 예

<template>
  <div>
    <pre><code ref="codeBlock" class="html">
      &lt;!-- Example HTML code --&gt;
      &lt;div&gt;Hello, world!&lt;/div&gt;
    </code></pre>
    <button @click="rehighlightCode">Rehighlight Code</button>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';

export default {
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
      // Remove the data-highlighted attribute if it exists
      if (codeBlock.hasAttribute('data-highlighted')) {
        codeBlock.removeAttribute('data-highlighted');
      }
    },
    removeHighlighting(element) {
      // Remove the hljs class from the element
      element.classList.remove('hljs');

      // Create a temporary element to hold the plain text
      const tempElement = document.createElement('div');
      tempElement.innerHTML = element.innerHTML;

      // Get all the span elements and unwrap their content
      const spans = tempElement.querySelectorAll('span');
      spans.forEach(span => {
        span.replaceWith(document.createTextNode(span.textContent));
      });

      // Set the cleaned content back to the code block
      element.innerHTML = tempElement.textContent;
    },
    rehighlightCode() {
      const codeBlock = this.$refs.codeBlock;

      // Remove existing highlighting
      this.removeHighlighting(codeBlock);

      // Reapply Highlight.js
      hljs.highlightBlock(codeBlock);

      // Ensure the data-highlighted attribute is removed
      if (codeBlock.hasAttribute('data-highlighted')) {
        codeBlock.removeAttribute('data-highlighted');
      }
    }
  }
};
</script>

 

11. CodeView.vue 수정했습니다.

위에 알려준 코드 중 codeBlock.removeAttribute('data-highlighted'); 적용하였습니다.

 

 

정상적으로 동작을 합니다.

 

 

12. 소스 코드 입니다.

 

CodeView.vue

<template>
  <div>
    <pre><code ref="codeBlock" class="language-javascript">{{ renderCode }}</code></pre>
    <button @click="updateCode">Update Code</button>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';

export default {
  name: 'CodeHighlight',
  data() {
    return {
      renderCode: `// Example JavaScript code
function helloWorld() {
  console.log('Hello, world!');
}
helloWorld();`
    };
  },
  watch: {
    renderCode() {
      this.highlightCode();
    }
  },
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock;
      hljs.highlightBlock(codeBlock);
    },

    removeHighlighting(element) {
      // Remove the hljs class from the element
      element.classList.remove('hljs');

      // Create a temporary element to hold the plain text
      const tempElement = document.createElement('div');
      tempElement.innerHTML = element.innerHTML;

      // Get all the span elements and unwrap their content
      const spans = tempElement.querySelectorAll('span');
      spans.forEach(span => {
        span.replaceWith(document.createTextNode(span.textContent));
      });

      // Remove the data-highlighted attribute if it exists
      if (element.hasAttribute('data-highlighted')) {
        element.removeAttribute('data-highlighted');
      }

      // Set the cleaned content back to the code block
      element.innerHTML = this.renderCode;  //tempElement.textContent;
    },    

    updateCode() {
      this.renderCode = `// Updated JavaScript code
function newFunction() {
  console.log('Code updated!');
}
newFunction();`;

      // Remove existing highlighting
      const codeBlock = this.$refs.codeBlock;      
      // Remove existing highlighting
      this.removeHighlighting(codeBlock);
    }
  }
};
</script>

 

App.vue

<template>
  <div id="app">
    <CodeView />
  </div>
</template>

<script>
import CodeView from './components/CodeView.vue';

export default {
  name: 'app',
  components: {
    CodeView
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

'PWA' 카테고리의 다른 글

ChatGPT에게 물었습니다. Storage에 Image Upload  (0) 2024.07.11
ChatGPT에게 물었습니다. Firebase  (0) 2024.07.10
ChatGPT에게 물었습니다. Serverless  (0) 2024.07.10
ChatGPT에게 물었습니다. Markdown Editor 개발  (0) 2024.07.09
ChatGPT에게 물었습니다. Markdown Editor  (0) 2024.07.02

'PWA'의 다른글

  • 현재글ChatGPT에게 물었습니다. Code Highlight

관련글

티스토리툴바