Editor

Dilif uses a WYSIWYG editor so you don't have to worry about markups. Most of the options are straight forward and available as buttons at top bar. Few not-so-obvious tricks are discussed below.

Adding images

You can add images from files or insert images using external links using the image iconin editor top bar. In addition, images can also be pasted in directly from clipboard as well. For instance, if you want to copy an image from a web-page, right click on the image, click "Copy Image" from the context menu, come to the editor and just do "Ctrl+c". The image content will be uploaded to our server and the image from that link will get added. You can add images from screenshots or from image editors directly this way.

Adding code

To show code, use the code iconfrom the editor top bar. Code added this way will get pretty-printed or formatted with color automatically. E.g.

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World");
    }
}

If you don't want pretty print, use the "preformatted" option.

Add code snippet that runs when displaying.

Code snippets are small pieces of HTML/JavaScript/CSS code that can be added in a page which will execute and show up. For instance, you are developing a JavaScript library and want to show the result of running the JavaScript, a small snippet can be included. For instance, here's formatting a html select element with the Select2 library. To add code snippet, use the snippet icon in editor top bar -

The code for this is -

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />


<div style="padding:5px 0;">
<select id='myselect' class="js-example-basic-single pb-2" name="state" style="width:100%;">
  <option value="AL">Alabama</option>
  <option value="AS">Alsbama</option>
  <option value="WY">Wyoming</option>
</select>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br/>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco<br/>
laboris nisi ut aliquip ex ea commodo consequat.<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse<br/>
cillum dolore eu fugiat nulla pariatur.<br/>
Excepteur sint occaecat cupidatat non proident, sunt <br/>
in culpa qui officia deserunt mollit anim id est laborum.


<script>
    $(document).ready(function() {
        $('#myselect').select2();
    })
</script>

Details on code snippets can be read here - Code snippets