Heretto PDF Generator Code Editor

The Heretto PDF Generator includes a built-in code editor.

Figure 1. Side by Side Code Editor
pdf generator editor
The editor pane on the left enables you to edit the following:
  • CSS
  • HTML
  • XSLT
The preview pane on the right enables you to see the following:
  • Normalized DITA (DITA with all references resolved)
  • HTML
  • PDF
  • Logs (transformation errors and warnings)
Remember: To enable the preview, you need to select a map by using the Select map to preview button. When you make a change in the code, you can refresh the preview by clicking Generate PDF.

Code Validation

The code editor continuously validates your code. Invalid code is underlined and also indicated in the scrollbar.
Figure 2. Invalid Code Indicators
code editor invalid indicator

Collapsed and Expanded Code

The code editor enables you to collapse and expand your code.

Figure 3. Expanded Code.

By default, the code is fully expanded.
expanded code
Figure 4. Collapsed Code.

Collapsing code makes navigation easier.
collapsed code

Code Editor Context Menu

The code editor provides you with a context menu that you can open by right-clicking the code.

Note: The available context menu options may vary depending on the code type that you edit.
Go to Definition
Jumps to the main selector.

If you right-click a nav element in the line 46, 51, 57, 61, or 65 and select Go to Definition, the code editor will jump to the main nav element in the line 42.

Peek Definition
Shows a preview of the main CSS selector. You can edit the code directly in the preview interface.
Find All References
Shows a preview of a given CSS selector references. You can edit the code directly in the preview interface. You can also navigate between the references by using the list on the right.
code editor find references
Go to Symbol
Shows a list of all selectors in the CSS code. You can click a selector in the list to jump to the selector line.
code editor go to symbol
Rename Symbol
Renames every occurrence of a given selector in the document.

In the following example, every nav selector (lines 41, 45, 50, 56, 60, 64) will be replaced with a div selector.

code editor rename symbol
Change All Occurrences
Replaces all occurrences of a given word in the code.

For example, by using this option, you can replace multiple elements in the HTML code.

code editor change all occurrences
Format Document
Pretty-prints the code.
Figure 5. Unformatted Code
code editor unformatted code

The Format Document option enables you to automatically format the code to make it more readable.

Figure 6. Formatted Code
code editor formatted code
Cut
Cuts selected code.
Copy
Copies selected code.
Command Palette
Shows a drop-down menu with a number of advanced options and associated keyboard shortcuts. The list includes options like joining lines, expanding lines, or toggling a high contrast theme.
code editor command pallete