Code Editor

Overview

The Steelkilt Code Editor allows you to customize the automatically generated EPUB content before export.

Code Editor has features common to many developer tools:

  • XHTML and CSS syntax highlighting
  • Themes with adjustable fixed-width fonts and color schemes (for background and syntax highlighting)

Code Editor Toolbar

The Code Editor toolbar includes the following buttons:

ButtonPurpose
Resource Inspector (for Settings)
Tools (such as Insert Link or Regenerate)
Change Code Editor appearance
Expand Code Editor to full screen (iPad only)

Code Navigator Organization

In Code Editor, the Code Navigator will give you access to the following top-level groups:

  • Templates and Extensions
  • Container (container.xml)
  • Package

Tap on Package to access XHTML Resources and other content.

Adding Custom Content

You can add custom content to the Package and Container folders using a range of commands:

CommandAccessDetails
New FolderSelect Package or any descendent of Package.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose New Folder
Creates a new folder.
New Blank DocumentSelect Package/XHTML or any descendent of Package/XHTML except the Style and Images folders.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose New Blank Document
Creates a new .txt document with no content or media type.

Change the Resource’s file extension and settings as required.


New XHTML PageSelect Package/XHTML or any descendent of Package/XHTML except the Style and Images folders.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose New XHTML Page
Creates a new .xhtml document with content based on Templates/<HTML> and an application/xhtml+xml media type.
New OPFSelect Package/XHTML or any descendent of Package/XHTML except the Style and Images folders.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose New OPF
Creates a new .opf file with a <metadata> element populated with content based on Book Settings and empty <manifest> and <spine> tags.

Does not create a corresponding entry in container.xml.
New CSSSelect Package/XHTML or any descendent of Package/XHTML except the Images folder.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose New CSS
Creates a new .css Resource with no content and a text/css media type.
Import Files…Select Package/XHTML or any descendent of Package/XHTML.

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Import Files…
Allows you to import files and folders.

When the Style folder is selected, only .css files can be imported.

When the Images folder is selected, only images can be imported.

Adds corresponding child Resources to the selected Resource.
Add encryption.xmlNavigate to the top level of Code Navigator (where container.xml is visible)

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Add encryption.xml
Creates an empty encyption.xml Resource.
Add manifest.xmlNavigate to the top level of Code Navigator (where container.xml is visible)

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Add manifest.xml
Creates an empty manifest.xml Resource.
Add metadata.xmlNavigate to the top level of Code Navigator (where container.xml is visible)

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Add metadata.xml
Creates an empty metadata.xml Resource.
Add rights.xmlNavigate to the top level of Code Navigator (where container.xml is visible)

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Add rights.xml
Creates an empty rights.xml Resource.
Add signatures.xmlNavigate to the top level of Code Navigator (where container.xml is visible)

Tap the plus (➕) icon at the top right of the Code Navigator.

Choose Add signatures.xml
Creates an empty signatures.xml Resource.

Inspector

When you select any automatically generated Resource (such as Templates, Extensions, container.xml, book.opf, book.css, or XHTML Resources representing Documents or Chapters etc.), the Inspector will include some explanatory text outlining the purpose of the Resource.

Selecting a custom Resource will show Resource Settings.


Related Concepts