vue 프로젝트 페이지 에 코드 블록 vue-prism-editor 를 삽입 하 는 실현

필요:

1.코드 를 입력 할 수 있 고 코드 문법 이 밝 습 니 다.
2.편집 및 편집 불가 모드 지원
3.백 엔 드 에 코드 내용 을 문자열 형식 으로 제출
이루어지다
gitbug 에서 vue-prism-editor 를 찾 으 면 이상 의 수 요 를 만족 시 킬 수 있 습 니 다.
쓰다
1.vue-prism-editor 설치

npm install vue-prism-editor

vue-prism-editor 는 prismjs 에 의존 해 야 하기 때문에 prismjs 를 설치 해 야 합 니 다.

npm install prismjs

2.vue-prism-editor 를 사용 해 야 하 는 구성 요소 에 도입

import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

3.html 코드

<prism-editor
 class="my-editor height-300"
 v-model="code"
 :highlight="highlighter"
 :line-numbers="lineNumbers"
></prism-editor>

code---하 이 라이트 가 필요 한 코드 내용
highlighter----methods 에 정 의 된 방법 은 code 를 하 이 라이트 로 표시 하 는 데 사 용 됩 니 다.
lineNumbers----표 지 를 편집 할 수 있 습 니까?
4.js 코드

export default {
 components: {
 PrismEditor
 },
 data: () => ({
 code: 'console.log("Hello World")',
 lineNumbers: true, // true     ， false       
 }),
 methods: {
 highlighter(code) {
 return highlight(code, languages.js); //returns html
 }
 }
};

5.css 코드

<style lang="scss">
/* required class */
.my-editor {
 background: #2d2d2d;
 color: #ccc;

 font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 font-size: 14px;
 line-height: 1.5;
 padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
 outline: none;
}

/* not required: */
.height-300 {
 height: 300px;
}
</style>

메모:css 스타일 은 반드시 써 야 합 니 다.그렇지 않 으 면 편집기 에 스타일 이 없고 순수한 페이지 만 보 여 줍 니 다.
"height-300"은 편집기 에 높이 를 설정 하 는 것 입 니 다.높이 는 스스로 설정 할 수도 있 고 설정 하지 않 아 도 됩 니 다.이 스타일 은 필요 하지 않 습 니 다.
여기까지 기능 은 기본적으로 실현 되 었 다.
그러나 그 과정 에서 문제 가 생 겼 고 여기 서도 함께 정리 했다.
문제.
1.설치vue-prism-editor만 하고 prismjs 를 설치 하지 않 으 면 다음 과 같은 오 류 를 보고 할 수 있 습 니 다npm install prismjs.

2.오류 보고 중 업그레이드 알림 이 있 거나 ajv 또는 vue 2.6.X 버 전 을 설치 하면 알림 에 따라 설치 하면 됩 니 다.

npm install ajv@^6.9.1
npm install vue@^2.6.11

개인 적 으로 ajv 와 vue 버 전이 너무 낮 으 면vue-prism-editor의존 하 는 관련 물건 이 설치 되 지 않 을 수 있 으 므 로 ajv 와 vue 를 업그레이드 한 후 다시 설치vue-prism-editor와 prismjs 를 권장 합 니 다.
3.vue 와 vue-template-copiler 버 전이 일치 하지 않 습 니 다.

저 버 전 vue-template-compiler 마 운 트 해제

npm uninstall vue-template-compiler

그리고 vue 와 같은 버 전의 vue-template-copiler 를 설치 합 니 다.

npm install [email protected]

vue 프로젝트 페이지 에 코드 블록 vue-prism-editor 가 들 어 있 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 프로젝트 페이지 에 코드 블록 이 들 어 있 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!