Vue 애플리케이션에 Prism.js를 추가합니다.

안녕,

이제 우리가 떠난 곳에서 계속할 수 있습니다. 지금까지 한 주 어땠어?. 내 자습서를 따라 주셔서 감사합니다. 우리가 여기에 남겨둔 곳에서 선택하기 전에 다음 자습서 목록이 있습니다. 우리의 목표는 서버리스, 컨테이너 및 서버 접근 방식 간의 서로 다른 접근 방식을 실제로 배우는 것임을 기억하십시오.

Passport를 통합하여 Node, Express, Mongo DB 및 Vue 응용 프로그램에 대한 인증을 처리하는 방법입니다.

Node, Express, Mongo DB 및 Vue에서 JWT 인증 및 권한 부여.

API 게이트웨이, Lambda, DyanamoDB 및 Vue.

애플리케이션 증폭 및 Vue.

Socket.io, Node, Express, Mongo DB 및 Vue

오! 가까이에 관심이 있는 사람들을 위해 대부분의 자습서에 대한 과정을 만들 것입니다.

본론으로 들어가 애플리케이션에 코드 섹션을 추가하고 일부 코드 강조 표시를 추가하려는 사람을 위해 간단한 튜토리얼을 제공하겠습니다.

Prism.js를 사용합시다. Highlight.js 또는 원하는 다른 것을 사용할 수 있습니다. 오늘 우리는 Vue에 Prism을 추가하는 것에 대해 이야기할 것입니다.

A. 애플리케이션에 패키지를 설치합니다.

yarn add prismjs OR npm install prismjs

B. 강조하고 싶은 코드가 있는 구성 요소에서 DOMContentLoaded 이벤트가 발생하기 전에 Prism.manual을 true로 설정하고 사용하려는 프리즘과 테마를 가져옵니다.

<script>
import Prism from "prismjs";
import "prismjs/themes/prism.css"; // you can change
export default {
  data() {
    return {
      //
    };
  },
  // mounted
  mounted() {
    window.Prism = window.Prism || {};
    window.Prism.manual = true;
    Prism.highlightAll(); // highlight your code on mount
  }
};
</script>

C. 원하는 테마로 변경할 수 있습니다. Prism과 함께 설치된 기본 테마가 있습니다. node.modules의 prism 폴더로 이동하여 themes 폴더를 확인합니다.



그것이 Prism을 Vue 애플리케이션에 통합하기 위해 우리가 해야 할 전부입니다. HTML 언어를 구현하는 방법. javascript 및 기타 언어를 구현하는 것은 간단합니다.

<pre><code class="language-javascript">
  // code here for example
  function hello(){
     console.log(Hello World)
  } 
</code></pre>

HTML의 경우 다르게 구현해야 합니다.

<pre><code class="language-markup"><script type="prism-html-markup">
  // code here
 <div>Hello World</div>
</code></pre>

이것이 prism.js 및 Vue 애플리케이션으로 시작하려는 사람에게 도움이 되기를 바랍니다. Prism.js에 대한 자세한 내용은 https://prismjs.com/ , https://prismjs.com/docs/index.html

다음 튜토리얼을 확인하세요.

고맙습니다.