Saturday, 25 Apr 2020

How to Add CKEditor in your project and write source code with Codesnippet

Sometimes you want to create a learning website and have source codes and photos on your web page. For doing this, you can use the CKEditor. In this tutorial, I will show how to add CKEditor and configure it.

  1. Please go to CKEditor website and download it
  2. Add below Links in HTML header based on you CKEditor version that you have downloaded it.
<script src="ckeditor/ckeditor.js"></script>
<link  href="ckeditor/plugins/codesnippet/lib/highlight/styles/dark.css" rel="stylesheet">
<script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
  1. Add a div ag and a textarea tag with id=" editor1" in it:
<div class="container">
  <div class="row">
    <div class="col-sm-12">
       <textarea  id="editor1" rows="50" cols="80"></textarea>
  1. Then download Codesnippet (I have put in source code) and copy to /ckeditor/plugins/
  2. Add this script:
        CKEDITOR.replace('editor1', {
        extraPlugins: 'codesnippet',
        codeSnippet_theme: 'monokai_sublime'

 In which 'monokai_sublime' is a theme, that you can find more themes in below link:

  1.  When you run the project or HTML file you will see an extra object in CKEditor as following:

When click on it, a window will be open that you can write your code and select your language:

Then click OK



Wherever you want your code to be displayed, you can use the desired design. For example, I used the following code and got an acceptable result:

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f2334c !important;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace !important;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;


Recent Comments


I think you're talented and clever programmer


Thank you for your message. it's my pleasure.