Coding in the Visual Editor

Inserting Code

Inserting and editing code is extremely simple in visual mode. To insert a new code block, simply click on the button with the ‘code’ icon that looks like this: Screen Shot 2015-04-02 at 8.05.25 PM . This opens a popup with several options, where you can choose the programming language, set the element type (inline/block) and most important – write your code in a real code editor that highlights your code and checks for errors in real time.

The integrated code editor popup

 

Available Options

  • Language – Choose one of 100+ programming languages.
  • Display Type – Choose between displaying the code inlined with text, or in it’s own block.
  • Initial Visibility – Hidden code blocks will not be visible until the user clicks on the “Show Code” button.
  • Caption Text – Add a description to your code.
  • Starting Line – Choose the first line number of the code block.
  • Code Editor – Here you can write the code and see how it is highlighted in real time. The editor also checks for syntax errors.

Once you click on Insert, the code will be inserted to the document with all the properties that were set in the popup.

Editing/Deleting Code

To edit or delete code blocks, simply click on them to show the floating bar. The floating bar has two options – Edit and Delete. If you click Edit, a popup window will show where you can modify the code block. If you click Delete, the code block will be removed.

The floating bar

The floating bar

 

 Highlighting Existing Text

It is also possible to syntax-highlight text from the document, without copying and pasting it. This is done by highlighting the selected text and clicking the Insert Code button.

Highlight existing text

Highlight existing text

This will open a popup window with the selected text automatically pasted in the code editor.

Coding in the HTML Editor

Mivhak is safe to use in both the Visual and the HTML editors. Although it is more convenient to create documents in the Visual Editor, it is sometimes necessary to use the HTML Editor for certain tasks. You can choose the option that best fits your needs.

Inserting Code

In the HTML editor, you can insert code by manually typing the HTML element that you want to insert. Mivhak uses the <code> element for inline code and the <pre> element for code blocks. To let Mivhak know that you want these elements to be highlighted, you have two options:

  • Add a CSS class class="prettyprint"
  • Set Auto Assign to automatically highlight <pre> and <code> elements (through the Admin Page)

To set the programming language, add a CSS class with the programming language name, prepended by lang-. For example, to highlight for the PHP programming language, add the CSS class lang-php.

The Admin Page

Mivhak’s administration page can be accessed by clicking on the menu item called Mivhak located in the left side bar. Mivhak’s admin page gives you control over general settings and visual settings.

General

  • Line Numbers – Show/hide line numbers for highlighted code blocks.
  • Show Meta Bar – Show/hide a header bar with meta information and controls.
  • Minimum Lines – Code blocks with less lines than specified here will not show a meta header bar.
  • Auto Assign – Choose the HTML elements that you want Mivhak to automatically syntax-highlight.
  • Default Language – Choose a programming language that will be used by default for code blocks that have no specified programming language.

Appearance

  • Use Custom CSS – Toggle on/off to use the custom CSS on the next field. The CSS code will be printed in the document’s head.
  • Custom CSS Code – Insert your custom CSS here. Since this will be printed in the head of the document (as opposed to making an http request), it is not recommended to use this for big CSS changes (hundreds of lines of code).
  • Theme – Choose a highlighter theme that best matches your blog’s theme style. You can see how the theme look in real time.

Spread the word about Mivhak!