Add prism to summernote

Question

Is there any way to add a button for prism in summernote editor?

I have prism css and js file included in my view but i don't know how to add button for it in editor:

$(document).ready(function() {
  $('.summernote').summernote({
      minHeight: 200,
      toolbar: [
         ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
         ['font', ['strikethrough', 'superscript', 'subscript']],
         ['fontsize', ['fontsize', 'fontname', 'fontsizeunit', 'height']],
         ['color', ['color']],
         ['para', ['ul', 'ol', 'paragraph']],
         ['table', ['table']],
         ['insert', ['link', 'emoji', 'picture', 'video']],
         ['view', ['fullscreen', 'codeview', 'help']]
      ]
  });
});

Any idea?

Clime

What have you already tried - I was doing the same with prettify, so I guess it is possible with prism. – Rabin

I haven't tried anything, couldn't find any article on net for prism and summernote :/ – Clime

With prettify I get .innerHTML of the editor and than I put the contents into <pre>, after that it was easy. I made a switch (checkbox) to switch between code and editor. In source code mode I hide all buttons like bold etc. But this project does not belong to me, so I can't share it. Edit: You probably won't find any official tutorial how to do it. – Rabin

Answer 1

Solved

I fixed my issue by creating a plugin for summernote as well as package for others to use

Screenshots

editor

view

Package links

NPM

GitHub

Hope it help others as well.

Clime