IT заметки по программированию
IT заметки по программированию
IT заметки по программированию
IT заметки по программированию

Внедрение highlight.js для работы в vue2-editor

30.01.2022
Javascript
Комментариев нет

Для подсветки в области редактирования:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
 
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
 
export default {
   ...
 
     data: () => ({
       editorSettings: {
         modules: {
            syntax: {
               highlight: text => hljs.highlightAuto(text).value
            }
         }
      },
 
   ...
  })
 
}
 

Для подсветки на странице вывода.

Код директивы:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import hljs from "highlight.js";
 
export default {
 
        deep: true,
            bind: function(el, binding) {
            // on first bind, highlight all targets
            let targets = el.querySelectorAll('code')
            targets.forEach((target) => {
                // if a value is directly assigned to the directive, use this
                // instead of the element content.
                if (binding.value) {
                    target.textContent = binding.value
                }
                hljs.highlightBlock(target)
            })
        },
 
        componentUpdated: function(el, binding) {
            // after an update, re-fill the content and then highlight
            let targets = el.querySelectorAll('code')
            targets.forEach((target) => {
                if (binding.value) {
                    target.textContent = binding.value
                    hljs.highlightBlock(target)
                }
            })
    }
 
}
 

Код компонента, где используется директива:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
    [pre v-highlightjs autodetect]
      [code]
        //Какой-то код
      [/code]
    [/pre]
...
import highlightjs from 'pathto/highlightjs'
 
export default {
   ...
  directives: {
    highlightjs
  },

«[pre v-highlightjs]» — квадратные скобки заменить на «»

Recommended Posts

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *