froala-code-highlighter

The Froala plugin that you can quote your codes in the Froala rich text editor panel and the codes shown as a terminal and added lines numbers. The plugin is simple, I didn't add any fancy control, just for my feature use.

HTML example in Froala Rich Text Editor:

Requirements

[Froala rich text editor](https://github.com/froala/wysiwyg-editor)

google-code-prettify

Getting Started

You will need to include the froala editor and prettify and also this plugin

Include the CSS in the head

  <!-- Include Font Awesome. -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <!-- Include Editor style. -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.2/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.2/css/froala_style.min.css" rel="stylesheet" type="text/css" />

Include the JS

  <!-- Include jQuery. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <!-- Include JS files. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.2/js/froala_editor.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>

<script src="js/froala.codepanel.js"></script>

Add the theme css

<link rel="stylesheet" href="css/sunburst.css">

sunburst theme example (code is not relevant):

There are other two included, sons-of-obsidian and monokai

You can find more prettify color theme somewhere on the internet.

Place a div in the body

<div id='edit'></div>

Give the options when you initialize the Froala rich text editor

<script>
  $(document).ready(function() {
    $('#edit').froalaEditor({
      toolbarButtons: ['codePanel'] /* and other toolbar buttons you want to add on */
    })
  });
</script>

Done!