| Author | DaveJarvis <email> |
|---|---|
| Date | 2025-08-27 17:33:28 GMT-0700 |
| Commit | 19acc6bec182d61c6c22dae670bd5bf2b7e578a1 |
| Parent | d386773 |
| Delta | 1199 lines added, 1203 lines removed, 4-line decrease |
| -From https://github.com/greenrobot/EventBus#r8-proguard | ||
| - | ||
| - -keepattributes *Annotation* | ||
| - -keepclassmembers class * { | ||
| - @org.greenrobot.eventbus.Subscribe <methods>; | ||
| - } | ||
| - -keep enum org.greenrobot.eventbus.ThreadMode { *; } | ||
| - | ||
| +# Introduction | ||
| + | ||
| +This document describes how to use the application. | ||
| + | ||
| +# Variable definitions | ||
| + | ||
| +Variable definitions provide a way to insert key names having associated values into a document. The variable names and values are declared inside an external file using the [YAML](http://www.yaml.org/) file format. Simply put, variables are written in the file as follows: | ||
| + | ||
| +``` | ||
| +key: value | ||
| +``` | ||
| + | ||
| +Any number of variables can be defined, in any order: | ||
| + | ||
| +``` | ||
| +key_1: Value 1 | ||
| +key_2: Value 2 | ||
| +``` | ||
| + | ||
| +Variables can reference other variables by bookending the key name within symbols: | ||
| + | ||
| +``` | ||
| +key: Value | ||
| +key_1: {{key}} 1 | ||
| +key_2: {{key}} 2 | ||
| +``` | ||
| + | ||
| +Variables can use a nested structure to help group related information: | ||
| + | ||
| +``` | ||
| +novel: | ||
| + title: Book Title | ||
| + author: Author Name | ||
| + isbn: 978-3-16-148410-0 | ||
| +``` | ||
| + | ||
| +Use a period to reference nested keys, such as: | ||
| + | ||
| +``` | ||
| +novel: | ||
| + author: Author Name | ||
| +copyright: | ||
| + owner: {{novel.author}} | ||
| +``` | ||
| + | ||
| +Save the variable definitions in a file having an extension of `.yaml` or `.yml`. | ||
| + | ||
| +# Document editing | ||
| + | ||
| +The application's purpose is to completely separate the document's content from its presentation. To achieve this, documents are composed using a [plain text](http://spec.commonmark.org/0.28/) format. | ||
| + | ||
| +## Create document | ||
| + | ||
| +Start a new document as follows: | ||
| + | ||
| +1. Start the application. | ||
| +1. Click **File → New** to create an empty document to edit. | ||
| +1. Click **File → Open** to open a variable definition file. | ||
| +1. Change **Source Files** to **Variable Files** to list variable definition files. | ||
| +1. Browse to and select a file saved with a `.yaml` or `.yml` extension. | ||
| +1. Click **Open**. | ||
| + | ||
| +The variable definitions appear in the variable definition pane under the heading of **Variables**. | ||
| + | ||
| +## Edit document | ||
| + | ||
| +Edit the document as normal. Notice how the preview pane updates as new content is added. The toolbar shows various icons that perform different formatting operations. Try them to see how they appear in the preview pane. Other operations not shown on the toolbar include: | ||
| + | ||
| +* Struck text (enclose the words within `~~` and `~~`) | ||
| +* Horizontal rule (use `---` on an otherwise empty line). | ||
| + | ||
| +The preview pane shows one way to interpret and format the document, but many other presentations are possible. | ||
| + | ||
| +## Insert variable | ||
| + | ||
| +Let's assume that the variable definitions loaded into the application include: | ||
| + | ||
| +``` | ||
| +novel: | ||
| + title: Diary of {{novel.author}} | ||
| + author: Anne Frank | ||
| +``` | ||
| + | ||
| +To reference a variable, type in the key name enclosed within double braces, such as: | ||
| + | ||
| +``` | ||
| +The novel "{{novel.title}}" is one of the most widely read books in the world. | ||
| +``` | ||
| + | ||
| +The preview pane shows: | ||
| + | ||
| +> The novel "Diary of Anne Frank" is one of the most widely read books in the world. | ||
| + | ||
| +As it is laborious to type in variable names, it is possible to inject the variable name using autocomplete. Accomplish this as follows: | ||
| + | ||
| +1. Create a new file. | ||
| +1. Type in a partial variable value, such as **Dia**. | ||
| +1. Press `Ctrl+Space` (hold down the `Control` key and tap the spacebar). | ||
| + | ||
| +The editor shows: | ||
| + | ||
| +``` | ||
| +{{novel.title}} | ||
| +``` | ||
| + | ||
| +The preview pane shows: | ||
| + | ||
| +``` | ||
| +Diary of Anne Frank | ||
| +``` | ||
| + | ||
| +The variable name is inserted into the document and the preview pane shows the variable's value. | ||
| + | ||
| +# Document metadata | ||
| + | ||
| +Document metadata is information about a document. Metadata often includes | ||
| +a title, author name, copyright date, and keywords. | ||
| + | ||
| +# Custom metadata | ||
| + | ||
| +The following screenshot shows example metadata preferences: | ||
| + | ||
| + | ||
| + | ||
| +The **Key** column lists metadata names and the **Value** column lists | ||
| +the metadata content for each corresponding **Key**. The content may | ||
| +include references to variable definitions. When the document is typeset, | ||
| +the values for the variables will be substituted upon export. | ||
| + | ||
| +When the document is exported as XHTML, the header will include the | ||
| +keys and values conforming to the XHTML specification. For example: | ||
| + | ||
| +``` html | ||
| +<head> | ||
| + <title>Document Title</title> | ||
| + <meta content="science, nature" name="keywords"/> | ||
| + <meta content="Penn Surnom" name="author"/> | ||
| + <meta content="4311" name="count"/> | ||
| +</head> | ||
| +``` | ||
| + | ||
| +# Special metadata | ||
| + | ||
| +When exporting the document, note the following special metadata: | ||
| + | ||
| +* **author** -- Included as PDF metadata | ||
| +* **byline** -- Replaces author in PDF metadata (e.g., for pen names) | ||
| +* **count** -- Total word count in document, automatically included | ||
| +* **keywords** -- Included as PDF metadata | ||
| +* **title** -- Included as a `<title>` tag, rather than a `<meta>` tag | ||
| + | ||
| +# Command-line arguments | ||
| + | ||
| +The application may be run from the command-line to convert Markdown and | ||
| +R Markdown files to a variety of output formats. Without specifying any | ||
| +command-line arguments, the application will launch a graphical user interface. | ||
| + | ||
| +## Common arguments | ||
| + | ||
| +The most common command-line arguments to use include: | ||
| + | ||
| +* `-h` -- displays all command-line arguments, then exits. | ||
| +* `-i` -- sets the input file name, must be a full path. | ||
| +* `-o` -- sets the output file name, can be a relative path. | ||
| +* `-s` -- sets a variable name and value at build time (dynamic data). | ||
| + | ||
| +## Example usage | ||
| + | ||
| +On Linux, simple usages include: | ||
| + | ||
| + keenwrite.bin -i $HOME/document/01.md -o document.xhtml | ||
| + | ||
| + keenwrite.bin -i $HOME/document/01.md -o document.md \ | ||
| + -v $HOME/document/variables.yaml | ||
| + | ||
| +That command will convert `01.md` into the respective file formats. In | ||
| +the first case, it will become an HTML page. In the second case, it will | ||
| +become a Markdown document with all variables interpolated and replaced. | ||
| + | ||
| +A more complex example follows: | ||
| + | ||
| + keenwrite.bin -i $HOME/document/01.Rmd -o document.pdf \ | ||
| + --image-dir=$HOME/document/images -v $HOME/document/variables.yaml \ | ||
| + --metadata="title={{book.title}}" --metadata="author={{book.author}}" \ | ||
| + --r-dir=$HOME/document/r --r-script=$HOME/document/r/bootstrap.R \ | ||
| + --theme-dir=$HOME/document/themes/boschet | ||
| + | ||
| +That command will convert `01.Rmd` to `document.pdf` and replace the metadata | ||
| +using values from the variable definitions file. | ||
| + | ||
| +Directory names containing spaces must be quoted. For example, on Windows: | ||
| + | ||
| + keenwrite.bin -i "C:\Users\My Documents\01.Rmd" -o document.pdf | ||
| + | ||
| +# Introduction | ||
| + | ||
| +From a high level, the application architecture for converting Markdown documents is captured in the following figure: | ||
| + | ||
| +``` diagram-graphviz | ||
| +digraph { | ||
| + node [fontname = "Noto Sans" fontsize=6 height=.25 penwidth=.5]; | ||
| + edge [fontname = "Noto Sans" fontsize=6 penwidth=.5 arrowsize=.5]; | ||
| + node [shape=box color="{{keenwrite.palette.primary.light}}" fontcolor="{{keenwrite.palette.primary.dark}}"] | ||
| + edge [color="{{keenwrite.palette.grayscale.light}}" fontcolor="{{keenwrite.palette.grayscale.dark}}"] | ||
| + | ||
| + {{keenwrite.classes.processors.variable.definition}} -> {{keenwrite.classes.processors.markdown}} [xlabel="{{keenwrite.graph.label.chain.next}} "] | ||
| + {{keenwrite.classes.processors.markdown}} -> {{keenwrite.classes.processors.preview}} [xlabel="{{keenwrite.graph.label.chain.next}} "] | ||
| + {{keenwrite.classes.processors.markdown}} -> Extensions [label=" contains"] | ||
| + | ||
| +Extensions -> FencedBlockExtension | ||
| +Extensions -> CaretExtension | ||
| +Extensions -> ImageLinkExtension | ||
| +Extensions -> TeXExtension | ||
| +} | ||
| +``` | ||
| + | ||
| +An extension is an addition to the Markdown parser, flexmark-java, that is used when converting the document's abstract syntax tree into an HTML document. The {{keenwrite.classes.processors.markdown}} contains both prepackaged and custom extensions. | ||
| +# Introduction | ||
| + | ||
| +The Scalable Vector Graphics (SVG) drawing software---[Batik](https://xmlgraphics.apache.org/batik/)---that's used by the application may be unable to read certain SVG files produced by [Inkscape](https://inkscape.org/). The result is that embedding the vector graphics files may trigger the following issues: | ||
| + | ||
| +* Unable to create nested element | ||
| +* Black blocks, no text displayed | ||
| +* Black text instead of coloured | ||
| + | ||
| +The remainder of this document explains these problems and how to fix them. | ||
| + | ||
| +# Nested element | ||
| + | ||
| +When referencing a vector graphic using Markdown, the status bar may show the following error: | ||
| + | ||
| +> The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: flowRoot). | ||
| + | ||
| +This error is due to a version mismatch of the `flowRoot` element that Inkscape creates. | ||
| + | ||
| +## Fix | ||
| + | ||
| +Resolve the issue by changing the SVG version number as follows: | ||
| + | ||
| +1. Edit the vector graphics file using any text editor. | ||
| +1. Find `version="1.1"` and change it to `version="1.2"`. | ||
| +1. Save the file. | ||
| + | ||
| +The SVG will now appear inside the application; however, the text may appear as black blocks. | ||
| + | ||
| +# Black blocks | ||
| + | ||
| +Depending on how text is added to a vector graphic in Inkscape, the text may be inserted within an element called a `flowRoot`. Although Batik recognizes `flowRoot` for SVG version 1.2, it cannot fully interpret the contents. Black blocks are drawn instead of the text, such as those depicted in the following figure: | ||
| + | ||
| + | ||
| + | ||
| +## Fix | ||
| + | ||
| +Resolve the issue by "unflowing" all text elements as follows: | ||
| + | ||
| +1. Start Inkscape. | ||
| +1. Load the SVG file. | ||
| +1. Select all the text elements. | ||
| +1. Click **Text → Unflow**. | ||
| + | ||
| +The text may change size and position; recreate the text without dragging using the text tool. After all the text areas have been recreated, continue as follows: | ||
| + | ||
| +1. Click **Edit → XML Editor**. | ||
| +1. Expand the **XML Editor** to see more elements. | ||
| +1. Delete all elements named `svg:flowRoot`. | ||
| +1. Save the file. | ||
| + | ||
| +When the illustration is reloaded, the black blocks will have disappeared, but the text elements ignore any assigned colour. | ||
| + | ||
| +# Black text | ||
| + | ||
| +When an SVG `style` attribute contains a reference to `-inkscape-font-specification`, Batik ignores all values that follow said reference. This results in black text, such as: | ||
| + | ||
| + | ||
| + | ||
| +## Fix | ||
| + | ||
| +Resolve the issue of colourless text as follows: | ||
| + | ||
| +1. Open the SVG file in a plain text editor. | ||
| +1. Remove all references `-inkscape-font-specification:'<FONT>';`, including the trailing (or leading) semicolon. | ||
| +1. Save the file. | ||
| + | ||
| +When the illustration is reloaded, the colours will have reappeared, such as: | ||
| + | ||
| + | ||
| + | ||
| +# Variables | ||
| + | ||
| +Diagrams that include variables: | ||
| + | ||
| + | ||
| + | ||
| + | ||
| + | ||
| +# PDF themes | ||
| + | ||
| +In the background of the following screenshot, the editor shows a novel | ||
| +being edited: | ||
| + | ||
| + | ||
| + | ||
| +Highlighted items of note: | ||
| + | ||
| +* PDF icon in the upper-left | ||
| +* Novel metadata as integrated variables towards the top-left | ||
| +* Theme selection dialog in the upper-middle | ||
| +* Three different styles, including: | ||
| + * Boschet, based on Baskerville font, nicely styled | ||
| + * Handrit, based on Courier font, double-spaced, manuscript format | ||
| + * Tarmes, based on Times Roman font, minimal styling | ||
| +* Variations in page numbers | ||
| +* Manuscript includes word count, automatically | ||
| +* Preferences dialog in the middle | ||
| + | ||
| +# Internationalization | ||
| + | ||
| +Poem with locale settings: | ||
| + | ||
| + | ||
| + | ||
| +# Equations | ||
| + | ||
| +TeX equations with detached preview: | ||
| + | ||
| + | ||
| + | ||
| +# Dockable tabs | ||
| + | ||
| +Document outline opened and docked in bottom-left corner: | ||
| + | ||
| + | ||
| + | ||
| +# Introduction | ||
| + | ||
| +This document describes how to use the [R](https://www.r-project.org/) | ||
| +programming language from within the application. The application uses an | ||
| +interpreter known as [Renjin](https://www.renjin.org/) to integrate with R. | ||
| + | ||
| +# Hello world | ||
| + | ||
| +Complete the following steps to see R in action: | ||
| + | ||
| +1. Start the application. | ||
| +1. Click **File → New** to create a new file. | ||
| +1. Click **File → Save As**. | ||
| +1. Set **Name** to: `addition.Rmd` | ||
| +1. Click **Save**. | ||
| + | ||
| +Setting the file name extension tells the application what processor to | ||
| +use when transforming the contents for display in the preview pane. Continue | ||
| +by typing in the following text, including the backticks: | ||
| + | ||
| +```r | ||
| +`r#1 + 1` | ||
| +``` | ||
| + | ||
| +The preview pane shows the result of `1` plus `1`: | ||
| + | ||
| +``` | ||
| +2.0 | ||
| +``` | ||
| + | ||
| +# Bootstrap script | ||
| + | ||
| +Being able to run R code while editing an R Markdown document is convenient. | ||
| +Having the ability to call functions is where the power of R can be | ||
| +leveraged. | ||
| + | ||
| +Complete the following steps to call an R function from your own library: | ||
| + | ||
| +1. Click **File → New** to create a new file. | ||
| +1. Click **File → Save As**. | ||
| +1. Browse to your home directory. | ||
| +1. Set **Name** to: `library.R`. | ||
| +1. Click **Save**. | ||
| +1. Set the contents to: | ||
| + ``` r | ||
| + sum <- function( a, b ) { | ||
| + a + b | ||
| + } | ||
| + ``` | ||
| +1. Click the **Save** icon. | ||
| +1. Click **R → Script**. | ||
| +1. Set the **R Startup Script** contents to: | ||
| + ``` r | ||
| + source( 'library.R' ); | ||
| + ``` | ||
| +1. Click **OK**. | ||
| +1. Create a new file. | ||
| +1. Set the contents to: | ||
| + ``` r | ||
| + `r#sum( 5, 5 )` | ||
| + ``` | ||
| +1. Save the file as `sum.R`. | ||
| + | ||
| +The preview panel shows the result of calling the `sum` function: | ||
| + | ||
| +``` | ||
| +10.0 | ||
| +``` | ||
| + | ||
| +This shows how the bootstrap script can load `library.R`, which defines | ||
| +a `sum` function that is called by name in the Markdown document. | ||
| + | ||
| +# Working directory | ||
| + | ||
| +R files may be sourced from any directory, not just the user's home | ||
| +directory. Accomplish this as follows: | ||
| + | ||
| +1. Click **R → Directory**. | ||
| +1. Set **Directory** to a different directory. | ||
| +1. Click **OK**. | ||
| +1. Create the directory if it does not exist. | ||
| +1. Move `library.R` into the directory. | ||
| +1. Append a new function to `library.R` as follows: | ||
| + ``` r | ||
| + mul <- function( a, b ) { | ||
| + a * b | ||
| + } | ||
| + ``` | ||
| +1. Click **R → Script**. | ||
| +1. Set the **R Startup Script** contents to: | ||
| + ``` r | ||
| + setwd( v$application$r$working$directory ); | ||
| + source( "library.R" ); | ||
| + ``` | ||
| +1. Change `sum.Rmd` to: | ||
| + ``` r | ||
| + `r#mul( 5, 5 )` | ||
| + ``` | ||
| +1. Close the file `sum.Rmd`. | ||
| +1. Confirm saving the file when prompted. | ||
| +1. Re-open `sum.Rmd`. | ||
| + | ||
| +The preview panel shows: | ||
| + | ||
| +``` | ||
| +25.0 | ||
| +``` | ||
| + | ||
| +Calling `setwd` using `v$application$r$working$directory` changes the | ||
| +working directory where the R engine searches for source files. | ||
| + | ||
| +# YAML variable definitions | ||
| + | ||
| +To see how variable definitions work in R, try the following: | ||
| + | ||
| +1. Create a new file. | ||
| +1. Change the contents to (use spaces not tabs): | ||
| + ``` yaml | ||
| + project: | ||
| + title: Project Title | ||
| + author: Author Name | ||
| + ``` | ||
| +1. Save the file as `definitions.yaml`. | ||
| +1. Click **File → Open**. | ||
| +1. Set **Source Files** to **Variable Files**. | ||
| +1. Select `definitions.yaml`. | ||
| +1. Click **Open**. | ||
| +1. Open `sum.Rmd` if it is not already open. | ||
| +1. Type: `je` | ||
| +1. Press `Ctrl+Space` | ||
| + | ||
| +The editor inserts the following text (matches `je` against Pro**je**ct): | ||
| + | ||
| +``` r | ||
| +`r#x( v$project$title )` | ||
| +``` | ||
| + | ||
| +The preview panel shows: | ||
| + | ||
| +``` | ||
| +r#x( 'Project Title' ) | ||
| +``` | ||
| + | ||
| +This is because the application inserts variable reference names based | ||
| +on the type of file being edited. By default, the R engine does not have | ||
| +a function named `x` defined. | ||
| + | ||
| +Continue as follows: | ||
| + | ||
| +1. Click **R → Script**. | ||
| +1. Append the following: | ||
| + ``` r | ||
| + x <- function( s ) { | ||
| + tryCatch( { | ||
| + r = eval( parse( text = s ) ) | ||
| + | ||
| + ifelse( is.atomic( r ), r, s ); | ||
| + }, | ||
| + warning = function( w ) { s }, | ||
| + error = function( e ) { s } ) | ||
| + } | ||
| + ``` | ||
| +1. Click **OK**. | ||
| +1. Close and re-open `sum.Rmd`. | ||
| + | ||
| +The preview panel shows: | ||
| + | ||
| +``` | ||
| +25.0 | ||
| + | ||
| +Project Title | ||
| +``` | ||
| + | ||
| +The `x` function attempts to evaluate the expression defined by the YAML | ||
| +variable. This means that the YAML variables can also include expressions | ||
| +that R is capable of evaluating. | ||
| + | ||
| +While the `x` function can be defined within the R Startup Script, it is | ||
| +better practice to put it into its own library so that it can be reused | ||
| +outside of the application. | ||
| + | ||
| +# Typesetting | ||
| + | ||
| +The application uses the [ConTeXt](https://contextgarden.net) typesetting | ||
| +system, the [podman](https://podman.io/) container manager, various | ||
| +[themes](https://gitlab.com/DaveJarvis/keenwrite-themes), and numerous | ||
| +fonts to produce high-quality PDF files. The container manager significantly | ||
| +reduces the number of manual steps in the installation process. | ||
| + | ||
| +When exporting a document to a PDF file for the first time, a series of | ||
| +semi-automated steps guides users through the installation process. These | ||
| +steps differ depending on the operating system. | ||
| + | ||
| +Run the installation wizard as follows: | ||
| + | ||
| +1. Start the application. | ||
| +1. Click **File → Export As → PDF**. | ||
| + | ||
| +Follow the steps in the wizard to install the requisite software and | ||
| +typesetting themes. | ||
| + | ||
| +# Overview | ||
| + | ||
| +Typesetting PDF files entails the following: | ||
| + | ||
| +* Download and install typesetting software | ||
| +* Download a theme pack | ||
| + | ||
| +These are described in the subsequent sections. Once the requirements have been met, continue reading to learn how to typeset a document. | ||
| + | ||
| +# Download typesetter | ||
| + | ||
| +Download the typesetting software as follows: | ||
| + | ||
| +1. Start the text editor. | ||
| +1. Click **File → Export As → PDF**. | ||
| + * Note the following details (e.g., Windows X86 64-bit): | ||
| + * operating system name; | ||
| + * instruction set; and | ||
| + * architecture. | ||
| +1. Click the [link](https://wiki.contextgarden.net/Installation) in the dialog. | ||
| +1. Download the appropriate archive file. | ||
| + | ||
| +# Install typesetter | ||
| + | ||
| +This section describes the installation steps for various platforms. Follow the steps that apply to the computer's operating system: | ||
| + | ||
| +* [Windows](#windows) (includes Windows 7, Windows 10, and similar) | ||
| +* [Unix](#unix) (includes MacOS, FreeBSD, Linux, and similar) | ||
| + | ||
| +## Windows | ||
| + | ||
| +Proceed with a Windows installation of the typesetting software as follows: | ||
| + | ||
| +1. Extract the `.zip` file into `C:\Users\%USERNAME%\AppData\Local\context` (the "root" directory) | ||
| +1. Run **install.bat** to download and install the software. | ||
| + * If prompted, click **Run anyway** (or click **More info** first). | ||
| +1. Right-click [localpath.bat](https://gitlab.com/DaveJarvis/KeenWrite/-/raw/main/scripts/localpath.bat). | ||
| +1. Select **Save Link As** (or similar). | ||
| +1. Save the file to the typesetting software's "root" directory. | ||
| +1. Rename `localpath.bat.txt` to `localpath.bat`, if necessary. | ||
| +1. Run `localpath.bat` (to set and save the `PATH` environment variable). | ||
| + | ||
| +Installation is complete. Verify the installation as follows: | ||
| + | ||
| +1. Type: `context --version` | ||
| +1. Press `Enter`. | ||
| + | ||
| +If version information is displayed then the software is installed correctly. | ||
| + | ||
| +Continue by installing a [theme pack](#theme-pack). | ||
| + | ||
| +## Unix | ||
| + | ||
| +For Linux, MacOS, FreeBSD, and similar operating systems, proceed as follows: | ||
| + | ||
| +1. Create `$HOME/.local/bin/context` | ||
| +1. Extract the `.zip` file within `$HOME/.local/bin/context` | ||
| +1. Run `sh install.sh` | ||
| +1. Add `export PATH=$PATH:$HOME/.local/bin/context/tex/texmf-linux-64/bin` to the login script. | ||
| + | ||
| +Installation is complete. Verify the installation as follows: | ||
| + | ||
| +1. Open a new terminal (to export the new PATH setting). | ||
| +1. Type: `context --version` | ||
| +1. Press `Enter`. | ||
| + | ||
| +If version information is displayed then the software is installed correctly. | ||
| + | ||
| +Continue by installing a [theme pack](#theme-pack). | ||
| + | ||
| +# Theme pack | ||
| + | ||
| +A theme pack is a set of themes that define how documents appear when typeset. Broadly, themes are applied as follows: | ||
| + | ||
| +* Install a theme pack | ||
| +* Configure individual themes | ||
| + | ||
| +## Install theme pack | ||
| + | ||
| +Install and configure the default theme pack as follows: | ||
| + | ||
| +1. Download the <a href="https://gitlab.com/DaveJarvis/keenwrite-themes/-/releases/permalink/latest/downloads/theme-pack.zip">theme-pack.zip</a> archive. | ||
| +1. Extract archive into a known location. | ||
| +1. Start the text editor, if not already running. | ||
| +1. Click **Edit → Preferences**. | ||
| +1. Click **Typesetting**. | ||
| +1. Click **Browse** beside **Themes**. | ||
| +1. Navigate to the `themes` directory. | ||
| +1. Click **Open**. | ||
| +1. Click **OK**. | ||
| + | ||
| +The theme pack is installed. | ||
| + | ||
| +Each theme has its own requirements, described below. | ||
| + | ||
| +## Configure Boschet theme | ||
| + | ||
| +Download and install the following font families: | ||
| + | ||
| +* [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) | ||
| +* [Archivo Narrow](https://fonts.google.com/specimen/Archivo+Narrow) | ||
| +* [Inconsolata](https://fonts.google.com/specimen/Inconsolata) | ||
| + | ||
| +The theme is configured. | ||
| + | ||
| +# Typeset single document | ||
| + | ||
| +Typeset a document as follows: | ||
| + | ||
| +1. Start the text editor, if not already running. | ||
| +1. Click **File → New** (or type `Ctrl+n`). | ||
| +1. Type in some text. | ||
| +1. Click **File → Export As → PDF** (or type `Ctrl+p`). | ||
| +1. Select a theme from the drop-down list. | ||
| +1. Click **OK** (or press `Enter`). | ||
| +1. Set the **File name** to the PDF file name. | ||
| +1. Click **Save**. | ||
| + | ||
| +The document is typeset; open the PDF file in a PDF reader to view the result. | ||
| + | ||
| +# Typeset multiple documents | ||
| + | ||
| +Typeset multiple documents similar to single documents, with one difference: | ||
| + | ||
| +* Click **File → Export As → Joined PDF** (or type `Ctrl+Shift+p`). | ||
| + | ||
| +All documents having the same file name extension in the same directory | ||
| +(or sub-directories) as the actively edited file are first concatenated then | ||
| +typeset into a single PDF document. The order that files are concatenated | ||
| +is numeric and alphabetic. | ||
| + | ||
| +For example, if `1.Rmd` is a sibling of the following files in the same | ||
| +directory, then all the files will be included in the PDF, as expected: | ||
| + | ||
| + chapter_1.Rmd | ||
| + chapter_2.Rmd | ||
| + chapter_2a.Rmd | ||
| + chapter_2b.Rmd | ||
| + chapter_3.Rmd | ||
| + chapter_10.Rmd | ||
| + | ||
| +Basically, sorting honours numbers and letters in file names. | ||
| + | ||
| +# Background | ||
| + | ||
| +This text editor helps keep content separated from presentation. Plain text documents will remain readable long after proprietary formats have become obsolete. However, we've come to expect much more in what we read than mere text: from hyperlinked tables of contents to indexes, from footers to footnotes, from mathematical expressions to complex graphics, modern documents are nuanced and multifaceted. | ||
| + | ||
| +## History | ||
| + | ||
| +Before computer-based typesetting, much of mathematics was put to page by hand. Professional typesetters, who were often expensive and usually not mathematicians, would inadvertently introduce typographic errors into equations. Phototypesetting technology improved upon hand-typesetting, but well-known computer scientist Donald Knuth---whose third volume of *The Art of Computer Programming* was phototypeset in 1976---expressed dissatisfaction with its typographic quality. He set himself two goals: let anyone create high-quality books without much effort and provide software that typesets consistently on all capable computers. Two years later, he released a typesetting system and a font description language: TeX and METAFONT, respectively. | ||
| + | ||
| +In short, TeX is software that helps typeset plain text documents. | ||
| + | ||
| +## ConTeXt | ||
| + | ||
| +Programming computers to typeset internationalized text automatically at the level we've become accustomed takes decades of development effort. Many free and open source software solutions can typeset text, including: ConTeXt, LaTeX, Sile, and others. ConTeXt, which builds upon TeX, is ideal for typesetting plain text into beautiful documents because it is developed with a notion of *setups*. These setups can wholly describe how text is to be typeset and---by being external to the text itself---configuring setups provides ample control over the document's final appearance without changing the prose. | ||
| + | ||
| +# Further reading | ||
| + | ||
| +Here are a few documents that introduce the typesetting system: | ||
| + | ||
| +* [What is ConTeXt?](https://www.pragma-ade.com/general/manuals/what-is-context.pdf) | ||
| +* [A not so short introduction to ConTeXt](https://github.com/contextgarden/not-so-short-introduction-to-context) | ||
| +* [Dealing with XML in ConTeXt MKIV](https://pragma-ade.com/general/manuals/xml-mkiv.pdf) | ||
| +* [Typographic Programming](https://www.pragma-ade.com/general/manuals/style.pdf) | ||
| + | ||
| +The [documentation library](https://wiki.contextgarden.net/Documentation) includes the following gems: | ||
| + | ||
| +* [ConTeXt Manual](https://www.pragma-ade.nl/general/manuals/ma-cb-en.pdf) | ||
| +* [ConTeXt command reference](https://www.pragma-ade.nl/general/qrcs/setup-en.pdf) | ||
| +* [METAFUN Manual](https://www.pragma-ade.nl/general/manuals/metafun-p.pdf) | ||
| +* [It's in the Details](https://www.pragma-ade.nl/general/manuals/details.pdf) | ||
| +* [Fonts out of ConTeXt](https://www.pragma-ade.com/general/manuals/fonts-mkiv.pdf) | ||
| + | ||
| +Expert-level documentation includes the [LuaTeX Reference Manual](https://www.pragma-ade.nl/general/manuals/luatex.pdf). | ||
| + | ||
| +# Skins | ||
| + | ||
| +The application provides bundled skins and the ability to add custom | ||
| +skins. This document describes the interplay between bundled skins | ||
| +and building your own look and feel. | ||
| + | ||
| +A skin is a set of styles, similar to cascading style sheet classes, | ||
| +that configures the user interface colours, fonts, spacing, highlights, | ||
| +drop-shadows, gradients, and more. | ||
| + | ||
| +For more information on CSS, see the [W3C CSS tutorial](https://www.w3.org/Style/Examples/011/firstcss). | ||
| + | ||
| +# Order | ||
| + | ||
| +The order that stylesheets are applied matters so that stylesheets can | ||
| +override styles defined previously. The application's user interface | ||
| +is made up of the following stylesheets, applied in the order listed: | ||
| + | ||
| +* **scene.css** --- Defines toolbar styling. | ||
| +* **markdown.css** --- Defines text editor styling. | ||
| +* **skins/skin_name.css** --- Bundled skin selected in preferences. | ||
| +* **custom.css** --- User-defined file set in preferences. | ||
| + | ||
| +# Customization | ||
| + | ||
| +Create a custom skin as follows: | ||
| + | ||
| +1. Start the application. | ||
| +1. Click **File → New** to create a new file. | ||
| +1. Click **File → Save As** to rename the file. | ||
| +1. Save the file as `custom.css`. | ||
| +1. Change the content to the following: | ||
| +``` css | ||
| +.root { | ||
| + -fx-base: rgb( 30, 30, 30 ); | ||
| + -fx-background: -fx-base; | ||
| +} | ||
| +``` | ||
| + | ||
| +Next, apply the skin as follows: | ||
| + | ||
| +1. Click **Edit → Preferences** to open the preferences dialog. | ||
| +1. Click **Skins** to view the available options. | ||
| +1. Click **Browse** to select a custom file. | ||
| +1. Browse to and select `custom.css`, created previously. | ||
| +1. Click **Open**. | ||
| +1. Click **Apply**. | ||
| + | ||
| +The user interface immediately changes to a dark mode. Continue: | ||
| + | ||
| +1. Click **OK** to close the dialog. | ||
| +1. Change the **rgb** numbers in **custom.css** from `30` to `60`. | ||
| +1. Click **File → Save** to save the CSS file. | ||
| + | ||
| +The user interface immediately changes colour. | ||
| + | ||
| +# Classes | ||
| + | ||
| +When creating your own skin, there many classes that can be styled. The | ||
| +previous section showed how to set up a rudimentary skin. Instead, start | ||
| +with a template that already has a number of classes defined so that you | ||
| +can tweak them to your taste. Accomplish this as follows: | ||
| + | ||
| +1. Visit the [skin](https://gitlab.com/DaveJarvis/KeenWrite/-/tree/main/src/main/resources/com/keenwrite/skins) repository directory | ||
| +1. Click one of the files (e.g., `haunted_grey.css`). | ||
| +1. Click **Raw**. | ||
| +1. Copy the entire text. | ||
| +1. Return to `custom.css`. | ||
| +1. Delete the contents. | ||
| +1. Paste the copied text. | ||
| +1. Save the file. | ||
| + | ||
| +To see how the CSS styles are applied to the text editor, open | ||
| +[markdown.css](https://gitlab.com/DaveJarvis/KeenWrite/-/blob/main/src/main/resources/com/keenwrite/editor/markdown.css), which is also in the repository. | ||
| + | ||
| +# Modena | ||
| + | ||
| +The basic look used by the application is _Modena Light_. Typically we | ||
| +only need to override a few classes to completely change the application's | ||
| +look and feel. For a full listing of available styles see the OpenJDK's | ||
| +[Modena CSS file](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css). | ||
| + | ||
| +# JavaFX CSS | ||
| + | ||
| +The [Java CSS Reference Guide](https://openjfx.io/javadoc/21/javafx.graphics/javafx/scene/doc-files/cssref.html) is exhaustive. In addition to showing many | ||
| +differences between JavaFX CSS and W3C CSS, the guide introduces numerous | ||
| +helpful functions for manipulating colours and gradients using existing | ||
| +colour definitions. | ||
| + | ||
| +# RichTextFX | ||
| + | ||
| +The application uses RichTextFX to render the text editor. Styling various | ||
| +text editor classes can require using the prefix `-rtfx` instead of the | ||
| +regular JavaFX `-fx`. | ||
| + | ||
| +# Submit | ||
| + | ||
| +If you have a look that you'd like to contribute to the project, do pass | ||
| +it along. Either open a new issue in the [issue tracker](https://gitlab.com/DaveJarvis/KeenWrite/-/issues) that contains the CSS file or submit a pull request. | ||
| + | ||
| +# Fenced divs | ||
| + | ||
| +This section describes the syntax to generate HTML `div` elements. The | ||
| +syntax is known as a _fenced div_. | ||
| + | ||
| +# Basic syntax | ||
| + | ||
| +A fenced div has the following basic syntax: | ||
| + | ||
| +``` markdown | ||
| +::: name | ||
| +Content | ||
| +::: | ||
| +``` | ||
| + | ||
| +To start a fenced div, begin a line with at least three colons (`:::`), | ||
| +followed by at least one space, followed by any word. Content may follow | ||
| +immediately on the next line. Terminate the fenced div with at least | ||
| +three colons. The terminating colons needn't match in number to the starting | ||
| +colons, but it's a good idea to maintain symmetry. | ||
| + | ||
| +The HTML that is generated from the above fenced div will resemble: | ||
| + | ||
| +``` html | ||
| +<div class="name"> | ||
| +<p>Content</p> | ||
| +</div> | ||
| +``` | ||
| + | ||
| +# Extended syntax | ||
| + | ||
| +A fenced div may use an extended syntax. The extended syntax can provide | ||
| +a unique identifier, multiple class names, and key/value data pairs. For | ||
| +example: | ||
| + | ||
| +``` markdown | ||
| +::: {#poem-01 .stanza author="Emily Dickinson" year=1890} | ||
| +Because I could not stop for Death — | ||
| +He kindly stopped for me — | ||
| +The Carriage held but just Ourselves — | ||
| +And Immortality. | ||
| +::: | ||
| +``` | ||
| + | ||
| +The above snippet produces: | ||
| + | ||
| +``` html | ||
| +<div id="poem-01" class="stanza" data-author="Emily Dickinson" data-year="1890"> | ||
| +<p>Because I could not stop for Death — | ||
| +He kindly stopped for me — | ||
| +The Carriage held but just Ourselves — | ||
| +And Immortality.</p> | ||
| +</div> | ||
| +``` | ||
| + | ||
| +Note that when using the extended syntax, class styles must be prefixed with | ||
| +a period (e.g., `.stanza` in the example). | ||
| + | ||
| +# Nested syntax | ||
| + | ||
| +Fenced divs may be nested, such as in the following example: | ||
| + | ||
| +``` markdown | ||
| +::: poem | ||
| +:::::: stanza | ||
| +Because I could not stop for Death — | ||
| +He kindly stopped for me — | ||
| +The Carriage held but just Ourselves — | ||
| +And Immortality. | ||
| +:::::: | ||
| +::: | ||
| +``` | ||
| + | ||
| +The above example produces: | ||
| + | ||
| +``` html | ||
| +<div class="poem"><div class="stanza"> | ||
| +<p>Because I could not stop for Death — | ||
| +He kindly stopped for me — | ||
| +The Carriage held but just Ourselves — | ||
| +And Immortality.</p> | ||
| +</div></div> | ||
| +``` | ||
| + | ||
| +# Quotation marks | ||
| + | ||
| +When converting straight single quotes into curled single quotes, the | ||
| +application offers a variety of entities to use for encoding: | ||
| + | ||
| +* **regular** -- Do not encode. | ||
| +* **modifier** -- Encode as \ʼ, the modifier letter apostrophe. | ||
| +* **apos** -- Encode as \', curled when typeset to PDF. | ||
| +* **aposhex** -- Encode as \', the apostrophe's numeric value. | ||
| +* **quote** -- Encode as \’, the right single quotation mark, which | ||
| +is typically curled in HTML and XHTML documents by default. | ||
| +* **quotehex** -- Encode \’, the right single quotation mark's numeric | ||
| +value. | ||
| + | ||
| +When typsetting into a PDF document, only the semantically correct value | ||
| +of \' will be curled automatically. | ||
| + | ||
| +# History | ||
| + | ||
| +Quotation marks trace back to Ancient Greek, later adopted to the diplé (⸖) | ||
| +circa 625 BCE, foreshadowing its later curve. By the seventeenth century, | ||
| +quotation marks grew common. During the nineteenth century, Western Europe | ||
| +turned the convexity of quotation mark pairs outward. | ||
| + | ||
| +Early mechanical typewriters, circa 1825, lacked many punctuation marks. As | ||
| +technology improved, additional keys were added while some keys played dual | ||
| +roles (such as I for 1). Straight single and double quotes could be co-opted | ||
| +for quotation marks and apostrophes, feet and inches marks, and primes and | ||
| +double-primes. There wasn't a pressing need to type curled versions because | ||
| +humans excel at understanding from context. | ||
| + | ||
| +Eventually straight quotes were codified for computers. Unfortunately, the | ||
| +apostrophe carried with it the baggage from typewriters. That is, burgeoning | ||
| +encoding standards failed to let users capture the nuances of the English | ||
| +language; computers forced users to treat the apostrophe as a straight quote. | ||
| +Standards bodies suggested using the right single quotation mark for an | ||
| +apostrophe instead, shirking off its semantic meaning. Consequently, | ||
| +text containing English quotations, especially British English, is now | ||
| +riddled with ambiguity. | ||
| + | ||
| +Consider the sentence: | ||
| + | ||
| +> Ambiguity lurks in "'cause the horses'". | ||
| + | ||
| +Does `'cause` mean _because_ or _induce_? The answer determines whether | ||
| +an open left single quote is used or an apostrophe, semantically speaking. | ||
| +It's amazing how ancient decisions still affect modern systems. | ||
| + | ||
| +# Internationalization | ||
| + | ||
| +The application supports internationalization (I18N). There are multiple | ||
| +components to editing and previewing internationalized text documents. | ||
| +These include: | ||
| + | ||
| +* Fonts | ||
| +* Language | ||
| + | ||
| +Both fonts and language must be set for non-Latin-based text. | ||
| + | ||
| +# Fonts | ||
| + | ||
| +The text editors and preview panel have independent font settings. For | ||
| +all Chinese, Japanese, and Korean (CJK) fonts, you may have to type in | ||
| +the font family name directly. | ||
| + | ||
| +For example, CJK font families for the editor have the following names: | ||
| + | ||
| +* **Noto Sans CJK KR** --- Korean font | ||
| +* **Noto Sans CJK JP** --- Japanese font | ||
| +* **Noto Sans CJK HN** --- Chinese font | ||
| +* **Noto Sans CJK SC** --- Simplified Chinese font | ||
| + | ||
| +While CJK font families for the preview have the following names: | ||
| + | ||
| +* **Noto Serif CJK KR** --- Korean font | ||
| +* **Noto Serif CJK JP** --- Japanese font | ||
| +* **Noto Serif CJK HN** --- Chinese font | ||
| +* **Noto Serif CJK SC** --- Simplified Chinese font | ||
| + | ||
| +## Editor | ||
| + | ||
| +Complete the following steps to change the editor font: | ||
| + | ||
| +1. Click **Edit → Preferences**. | ||
| +1. Click **Fonts**. | ||
| +1. Click **Change** under **Editor Font**. | ||
| +1. Find the font name by typing or scrolling. | ||
| +1. Click the desired font family. | ||
| +1. Click **OK**. | ||
| +1. Click **Apply**. | ||
| + | ||
| +The text editor font is changed. | ||
| + | ||
| +Note the following: | ||
| + | ||
| +* The font must be installed in the system for this to work. | ||
| +* You may have to edit the font name if it cannot be selected from the list. | ||
| +* Setting the editor font also sets the statistics panel font. | ||
| + | ||
| +## Preview | ||
| + | ||
| +The preview panel uses regular and monospace fonts. | ||
| + | ||
| +### Regular | ||
| + | ||
| +Complete the following steps to change the regular preview font: | ||
| + | ||
| +1. Click **Edit → Preferences**. | ||
| +1. Click **Fonts**. | ||
| +1. Click **Change** under **Preview Font** for the **Preview pane font name**. | ||
| +1. Find the font name by typing or scrolling. | ||
| +1. Click the desired font family. | ||
| +1. Click **OK**. | ||
| +1. Click **Apply**. | ||
| + | ||
| +The regular preview font is changed. | ||
| + | ||
| +### Monospace | ||
| + | ||
| +Complete the following steps to change the monospace preview font: | ||
| + | ||
| +1. Click **Edit → Preferences**. | ||
| +1. Click **Fonts**. | ||
| +1. Click **Change** under **Preview Font** for the **Monospace font name**. | ||
| +1. Find the font name by typing or scrolling. | ||
| +1. Click the desired font family. | ||
| +1. Click **OK**. | ||
| +1. Click **Apply**. | ||
| + | ||
| +The monospace font is changed. | ||
| + | ||
| +# Language | ||
| + | ||
| +Language settings control the locale that the application uses. When using | ||
| +a CJK font, for example, the application must also be instructed to use | ||
| +a particular locale. Change the locale as follows: | ||
| + | ||
| +1. Click **Edit → Preferences**. | ||
| +1. Click **Language**. | ||
| +1. Select a value for **Locale**. | ||
| +1. Click **Apply**. | ||
| + | ||
| +The language is set. | ||
| + | ||
| +# Captions and cross-references | ||
| + | ||
| +Users may define captions and cross-references to tables, figures, | ||
| +and equations. Unfortunately, at time of writing, the CommonMark | ||
| +specification is frozen. This means cross-references must be implemented | ||
| +as an extension to the Markdown specification, leaving the door open for | ||
| +differing Markdown rendering libraries and applications to diverge with | ||
| +respect to syntax. | ||
| + | ||
| +# Syntax | ||
| + | ||
| +This section describes how to use captions and cross-references within | ||
| +Markdown documents. The CommonMark standard details different ways to | ||
| +add captions to tables and figures. While those are supported, a more | ||
| +consistent syntax has been implemented. | ||
| + | ||
| +## Captions | ||
| + | ||
| +Tables, figures, and equations are captioned using the same syntax. In | ||
| +general, a line that starts with a double colon after a blank line will | ||
| +result in a caption added to the item immediately preceding it. The | ||
| +remainder of this section provides examples. | ||
| + | ||
| +### Images | ||
| + | ||
| +An image caption: | ||
| + | ||
| +``` | ||
| + | ||
| + | ||
| +:: Figure caption text | ||
| +``` | ||
| + | ||
| +### Table | ||
| + | ||
| +A table caption: | ||
| + | ||
| +``` | ||
| +| a | b | c | | ||
| +|---|---|---| | ||
| +| 1 | 2 | 3 | | ||
| +| 4 | 5 | 6 | | ||
| +| 7 | 8 | 9 | | ||
| + | ||
| +:: Table caption text | ||
| +``` | ||
| + | ||
| +### Equation | ||
| + | ||
| +An equation caption: | ||
| + | ||
| +``` | ||
| +$$E = mc^2$$ | ||
| + | ||
| +:: Equation caption | ||
| +``` | ||
| + | ||
| +# Cross-references | ||
| + | ||
| +There are two parts to a cross-reference: the anchor name and its references. | ||
| +An anchor name must be uniquely defined. Any number of references may refer | ||
| +to an anchor name. Anchor names can be associated with any item in the | ||
| +document, and are primarily added to captions. | ||
| + | ||
| +The general syntax for anchor names and references is: | ||
| + | ||
| +* `{#type-name:label}` (anchor name) | ||
| +* `[@type-name:label]` (reference) | ||
| + | ||
| +The `type-name` can be any alphanumeric value, starting with a letter or | ||
| +ideogram. Type names are user-defined categories for the item type. Labels | ||
| +are user-defined identifiers that must be unique per item. | ||
| + | ||
| +Consider the following example: | ||
| + | ||
| +``` | ||
| +In [@fig:animal], a cute animal is shown. | ||
| + | ||
| + | ||
| + | ||
| +:: World's cutest animal {#fig:animal} | ||
| + | ||
| +There is no cuter animal than the one in [@fig:animal]. | ||
| +``` | ||
| + | ||
| +The anchor name uniquely defines where an item in a document is located. Any | ||
| +number of references, anywhere in the document, may reference an anchor name. | ||
| +There are few restrictions placed on the possible type names and labels. Here | ||
| +are a few more anchor name examples: | ||
| + | ||
| +``` | ||
| +{#fig:cats} | ||
| +{#図版:猫} | ||
| +{#eq:mass-energy} | ||
| +{#eqn:laplace} | ||
| +``` | ||
| + | ||
| +## Type names | ||
| + | ||
| +To avoid duplicating writing the label each time (e.g., Figure, Table, | ||
| +Equation), there are a number of predefined labels associated with | ||
| +type names. The following table lists the type names and the label | ||
| +generated by the typesetting system: | ||
| + | ||
| +| Type name | English name | | ||
| +|-----------|--------------| | ||
| +| algorithm | Algorithm | | ||
| +| alg | Algorithm | | ||
| +| equation | Equation | | ||
| +| eqn | Equation | | ||
| +| eq | Equation | | ||
| +| figure | Figure | | ||
| +| fig | Figure | | ||
| +| formula | Formula | | ||
| +| listing | Listing | | ||
| +| list | Listing | | ||
| +| lst | Listing | | ||
| +| lyric | Lyrics | | ||
| +| music | Score | | ||
| +| score | Score | | ||
| +| source | Listing | | ||
| +| src | Listing | | ||
| +| tab | Table | | ||
| +| table | Table | | ||
| +| tbl | Table | | ||
| + | ||
| +These values are defined in the theme's `xhtml/xml-references.tex` file. | ||
| +# Credits | ||
| + | ||
| +Using libraries from: | ||
| + | ||
| +* Tomas Mikula: [RichTextFX](https://github.com/TomasMikula/RichTextFX), [WellBehavedFX](https://github.com/TomasMikula/WellBehavedFX), [Flowless](https://github.com/TomasMikula/Flowless), and [UndoFX](https://github.com/TomasMikula/UndoFX) | ||
| +* Jens Deters: [FontAwesomeFX](https://bitbucket.org/Jerady/fontawesomefx) | ||
| +* Dieter Holz: [PreferencesFX](https://github.com/dlsc-software-consulting-gmbh/PreferencesFX) | ||
| +* David Croft: [File Preferences](http://www.davidc.net/programming/java/java-preferences-using-file-backing-store) | ||
| +* Alex Bertram: [Renjin](https://www.renjin.org/) | ||
| +* Vladimir Schneider: [flexmark](https://github.com/vsch/flexmark-java) | ||
| +* Alberto Fernández, Shy Shalom, Kohei Taketa: [juniversalchardet](https://github.com/takscape/juniversalchardet) | ||
| +* Morten Nobel-Jørgensen: [Java Image Scaling](https://github.com/mortennobel/java-image-scaling) | ||
| + | ||
| +Inspired by: | ||
| + | ||
| +* Karl Tauber: [Markdown Writer FX](https://github.com/JFormDesigner/markdown-writer-fx) | ||
| The following documents have additional details about using the editor: | ||
| -* [cmd.md](cmd.md) -- Command-line argument usage | ||
| -* [div.md](div.md) -- Syntax for annotated text (fenced divs) | ||
| -* [i18n.md](i18n.md) -- Internationalization features | ||
| -* [r.md](r.md) -- R functions within R Markdown documents | ||
| -* [samples](samples) -- Example documents | ||
| -* [skins.md](skins.md) -- User interface customization | ||
| -* [svg.md](svg.md) -- Resolve issues with some SVG files | ||
| -* [metadata.md](metadata.md) -- Document metadata | ||
| -* [references.md](references.md) -- Captions and cross-references | ||
| -* [typesetting.md](typesetting.md) -- Document typesetting | ||
| -* [variables.md](variables.md) -- Variable definitions and interpolation | ||
| +* [Introduction](01-introduction.md) -- Getting started with KeenWrite | ||
| +* [Variables](02-variables.md) -- Variable definitions and interpolation | ||
| +* [Metadata](03-metadata.md) -- Document metadata | ||
| +* [Command-line](04-cmd.md) -- Command-line argument usage | ||
| +* [Diagrams](05-diagram.md) -- Creating diagrams and flowcharts | ||
| +* [SVG](06-svg.md) -- Resolve issues with some SVG files | ||
| +* [Screenshots](08-screenshots.md) -- Application screenshots | ||
| +* [R Integration](09-r.md) -- R functions within R Markdown documents | ||
| +* [Typesetting](10-typesetting.md) -- Document typesetting | ||
| +* [Custom Typesetting](11-typesetting-custom.md) -- Advanced typesetting customization | ||
| +* [Skins](12-skins.md) -- User interface customization | ||
| +* [Fenced Divs](13-div.md) -- Syntax for annotated text (fenced divs) | ||
| +* [Quotes](14-quotes.md) -- Quotes and citations | ||
| +* [Internationalization](15-i18n.md) -- Internationalization features | ||
| +* [References](16-references.md) -- Captions and cross-references | ||
| +* [Samples](samples) -- Example documents | ||
| # Contributions | ||
| - | ||
| -* [credits.md](credits.md) -- Thanks to authors of contributing projects | ||
| -* [licenses](licenses) -- Third-party licenses | ||
| +* [Credits](17-credits.md) -- Thanks to authors of contributing projects | ||
| +* [Licenses](licenses) -- Third-party licenses | ||
| -# Command-line arguments | ||
| - | ||
| -The application may be run from the command-line to convert Markdown and | ||
| -R Markdown files to a variety of output formats. Without specifying any | ||
| -command-line arguments, the application will launch a graphical user interface. | ||
| - | ||
| -## Common arguments | ||
| - | ||
| -The most common command-line arguments to use include: | ||
| - | ||
| -* `-h` -- displays all command-line arguments, then exits. | ||
| -* `-i` -- sets the input file name, must be a full path. | ||
| -* `-o` -- sets the output file name, can be a relative path. | ||
| -* `-s` -- sets a variable name and value at build time (dynamic data). | ||
| - | ||
| -## Example usage | ||
| - | ||
| -On Linux, simple usages include: | ||
| - | ||
| - keenwrite.bin -i $HOME/document/01.md -o document.xhtml | ||
| - | ||
| - keenwrite.bin -i $HOME/document/01.md -o document.md \ | ||
| - -v $HOME/document/variables.yaml | ||
| - | ||
| -That command will convert `01.md` into the respective file formats. In | ||
| -the first case, it will become an HTML page. In the second case, it will | ||
| -become a Markdown document with all variables interpolated and replaced. | ||
| - | ||
| -A more complex example follows: | ||
| - | ||
| - keenwrite.bin -i $HOME/document/01.Rmd -o document.pdf \ | ||
| - --image-dir=$HOME/document/images -v $HOME/document/variables.yaml \ | ||
| - --metadata="title={{book.title}}" --metadata="author={{book.author}}" \ | ||
| - --r-dir=$HOME/document/r --r-script=$HOME/document/r/bootstrap.R \ | ||
| - --theme-dir=$HOME/document/themes/boschet | ||
| - | ||
| -That command will convert `01.Rmd` to `document.pdf` and replace the metadata | ||
| -using values from the variable definitions file. | ||
| - | ||
| -Directory names containing spaces must be quoted. For example, on Windows: | ||
| - | ||
| - keenwrite.bin -i "C:\Users\My Documents\01.Rmd" -o document.pdf | ||
| - | ||
| -# Credits | ||
| - | ||
| -Using libraries from: | ||
| - | ||
| -* Tomas Mikula: [RichTextFX](https://github.com/TomasMikula/RichTextFX), [WellBehavedFX](https://github.com/TomasMikula/WellBehavedFX), [Flowless](https://github.com/TomasMikula/Flowless), and [UndoFX](https://github.com/TomasMikula/UndoFX) | ||
| -* Jens Deters: [FontAwesomeFX](https://bitbucket.org/Jerady/fontawesomefx) | ||
| -* Dieter Holz: [PreferencesFX](https://github.com/dlsc-software-consulting-gmbh/PreferencesFX) | ||
| -* David Croft: [File Preferences](http://www.davidc.net/programming/java/java-preferences-using-file-backing-store) | ||
| -* Alex Bertram: [Renjin](https://www.renjin.org/) | ||
| -* Vladimir Schneider: [flexmark](https://github.com/vsch/flexmark-java) | ||
| -* Alberto Fernández, Shy Shalom, Kohei Taketa: [juniversalchardet](https://github.com/takscape/juniversalchardet) | ||
| -* Morten Nobel-Jørgensen: [Java Image Scaling](https://github.com/mortennobel/java-image-scaling) | ||
| - | ||
| -Inspired by: | ||
| - | ||
| -* Karl Tauber: [Markdown Writer FX](https://github.com/JFormDesigner/markdown-writer-fx) | ||
| -# Introduction | ||
| - | ||
| -From a high level, the application architecture for converting Markdown documents is captured in the following figure: | ||
| - | ||
| -``` diagram-graphviz | ||
| -digraph { | ||
| - node [fontname = "Noto Sans" fontsize=6 height=.25 penwidth=.5]; | ||
| - edge [fontname = "Noto Sans" fontsize=6 penwidth=.5 arrowsize=.5]; | ||
| - node [shape=box color="{{keenwrite.palette.primary.light}}" fontcolor="{{keenwrite.palette.primary.dark}}"] | ||
| - edge [color="{{keenwrite.palette.grayscale.light}}" fontcolor="{{keenwrite.palette.grayscale.dark}}"] | ||
| - | ||
| - {{keenwrite.classes.processors.variable.definition}} -> {{keenwrite.classes.processors.markdown}} [xlabel="{{keenwrite.graph.label.chain.next}} "] | ||
| - {{keenwrite.classes.processors.markdown}} -> {{keenwrite.classes.processors.preview}} [xlabel="{{keenwrite.graph.label.chain.next}} "] | ||
| - {{keenwrite.classes.processors.markdown}} -> Extensions [label=" contains"] | ||
| - | ||
| -Extensions -> FencedBlockExtension | ||
| -Extensions -> CaretExtension | ||
| -Extensions -> ImageLinkExtension | ||
| -Extensions -> TeXExtension | ||
| -} | ||
| -``` | ||
| - | ||
| -An extension is an addition to the Markdown parser, flexmark-java, that is used when converting the document's abstract syntax tree into an HTML document. The {{keenwrite.classes.processors.markdown}} contains both prepackaged and custom extensions. | ||
| -# Fenced divs | ||
| - | ||
| -This section describes the syntax to generate HTML `div` elements. The | ||
| -syntax is known as a _fenced div_. | ||
| - | ||
| -# Basic syntax | ||
| - | ||
| -A fenced div has the following basic syntax: | ||
| - | ||
| -``` markdown | ||
| -::: name | ||
| -Content | ||
| -::: | ||
| -``` | ||
| - | ||
| -To start a fenced div, begin a line with at least three colons (`:::`), | ||
| -followed by at least one space, followed by any word. Content may follow | ||
| -immediately on the next line. Terminate the fenced div with at least | ||
| -three colons. The terminating colons needn't match in number to the starting | ||
| -colons, but it's a good idea to maintain symmetry. | ||
| - | ||
| -The HTML that is generated from the above fenced div will resemble: | ||
| - | ||
| -``` html | ||
| -<div class="name"> | ||
| -<p>Content</p> | ||
| -</div> | ||
| -``` | ||
| - | ||
| -# Extended syntax | ||
| - | ||
| -A fenced div may use an extended syntax. The extended syntax can provide | ||
| -a unique identifier, multiple class names, and key/value data pairs. For | ||
| -example: | ||
| - | ||
| -``` markdown | ||
| -::: {#poem-01 .stanza author="Emily Dickinson" year=1890} | ||
| -Because I could not stop for Death — | ||
| -He kindly stopped for me — | ||
| -The Carriage held but just Ourselves — | ||
| -And Immortality. | ||
| -::: | ||
| -``` | ||
| - | ||
| -The above snippet produces: | ||
| - | ||
| -``` html | ||
| -<div id="poem-01" class="stanza" data-author="Emily Dickinson" data-year="1890"> | ||
| -<p>Because I could not stop for Death — | ||
| -He kindly stopped for me — | ||
| -The Carriage held but just Ourselves — | ||
| -And Immortality.</p> | ||
| -</div> | ||
| -``` | ||
| - | ||
| -Note that when using the extended syntax, class styles must be prefixed with | ||
| -a period (e.g., `.stanza` in the example). | ||
| - | ||
| -# Nested syntax | ||
| - | ||
| -Fenced divs may be nested, such as in the following example: | ||
| - | ||
| -``` markdown | ||
| -::: poem | ||
| -:::::: stanza | ||
| -Because I could not stop for Death — | ||
| -He kindly stopped for me — | ||
| -The Carriage held but just Ourselves — | ||
| -And Immortality. | ||
| -:::::: | ||
| -::: | ||
| -``` | ||
| - | ||
| -The above example produces: | ||
| - | ||
| -``` html | ||
| -<div class="poem"><div class="stanza"> | ||
| -<p>Because I could not stop for Death — | ||
| -He kindly stopped for me — | ||
| -The Carriage held but just Ourselves — | ||
| -And Immortality.</p> | ||
| -</div></div> | ||
| -``` | ||
| - | ||
| -# Internationalization | ||
| - | ||
| -The application supports internationalization (I18N). There are multiple | ||
| -components to editing and previewing internationalized text documents. | ||
| -These include: | ||
| - | ||
| -* Fonts | ||
| -* Language | ||
| - | ||
| -Both fonts and language must be set for non-Latin-based text. | ||
| - | ||
| -# Fonts | ||
| - | ||
| -The text editors and preview panel have independent font settings. For | ||
| -all Chinese, Japanese, and Korean (CJK) fonts, you may have to type in | ||
| -the font family name directly. | ||
| - | ||
| -For example, CJK font families for the editor have the following names: | ||
| - | ||
| -* **Noto Sans CJK KR** --- Korean font | ||
| -* **Noto Sans CJK JP** --- Japanese font | ||
| -* **Noto Sans CJK HN** --- Chinese font | ||
| -* **Noto Sans CJK SC** --- Simplified Chinese font | ||
| - | ||
| -While CJK font families for the preview have the following names: | ||
| - | ||
| -* **Noto Serif CJK KR** --- Korean font | ||
| -* **Noto Serif CJK JP** --- Japanese font | ||
| -* **Noto Serif CJK HN** --- Chinese font | ||
| -* **Noto Serif CJK SC** --- Simplified Chinese font | ||
| - | ||
| -## Editor | ||
| - | ||
| -Complete the following steps to change the editor font: | ||
| - | ||
| -1. Click **Edit → Preferences**. | ||
| -1. Click **Fonts**. | ||
| -1. Click **Change** under **Editor Font**. | ||
| -1. Find the font name by typing or scrolling. | ||
| -1. Click the desired font family. | ||
| -1. Click **OK**. | ||
| -1. Click **Apply**. | ||
| - | ||
| -The text editor font is changed. | ||
| - | ||
| -Note the following: | ||
| - | ||
| -* The font must be installed in the system for this to work. | ||
| -* You may have to edit the font name if it cannot be selected from the list. | ||
| -* Setting the editor font also sets the statistics panel font. | ||
| - | ||
| -## Preview | ||
| - | ||
| -The preview panel uses regular and monospace fonts. | ||
| - | ||
| -### Regular | ||
| - | ||
| -Complete the following steps to change the regular preview font: | ||
| - | ||
| -1. Click **Edit → Preferences**. | ||
| -1. Click **Fonts**. | ||
| -1. Click **Change** under **Preview Font** for the **Preview pane font name**. | ||
| -1. Find the font name by typing or scrolling. | ||
| -1. Click the desired font family. | ||
| -1. Click **OK**. | ||
| -1. Click **Apply**. | ||
| - | ||
| -The regular preview font is changed. | ||
| - | ||
| -### Monospace | ||
| - | ||
| -Complete the following steps to change the monospace preview font: | ||
| - | ||
| -1. Click **Edit → Preferences**. | ||
| -1. Click **Fonts**. | ||
| -1. Click **Change** under **Preview Font** for the **Monospace font name**. | ||
| -1. Find the font name by typing or scrolling. | ||
| -1. Click the desired font family. | ||
| -1. Click **OK**. | ||
| -1. Click **Apply**. | ||
| - | ||
| -The monospace font is changed. | ||
| - | ||
| -# Language | ||
| - | ||
| -Language settings control the locale that the application uses. When using | ||
| -a CJK font, for example, the application must also be instructed to use | ||
| -a particular locale. Change the locale as follows: | ||
| - | ||
| -1. Click **Edit → Preferences**. | ||
| -1. Click **Language**. | ||
| -1. Select a value for **Locale**. | ||
| -1. Click **Apply**. | ||
| - | ||
| -The language is set. | ||
| - | ||
| -# Document metadata | ||
| - | ||
| -Document metadata is information about a document. Metadata often includes | ||
| -a title, author name, copyright date, and keywords. | ||
| - | ||
| -# Custom metadata | ||
| - | ||
| -The following screenshot shows example metadata preferences: | ||
| - | ||
| - | ||
| - | ||
| -The **Key** column lists metadata names and the **Value** column lists | ||
| -the metadata content for each corresponding **Key**. The content may | ||
| -include references to variable definitions. When the document is typeset, | ||
| -the values for the variables will be substituted upon export. | ||
| - | ||
| -When the document is exported as XHTML, the header will include the | ||
| -keys and values conforming to the XHTML specification. For example: | ||
| - | ||
| -``` html | ||
| -<head> | ||
| - <title>Document Title</title> | ||
| - <meta content="science, nature" name="keywords"/> | ||
| - <meta content="Penn Surnom" name="author"/> | ||
| - <meta content="4311" name="count"/> | ||
| -</head> | ||
| -``` | ||
| - | ||
| -# Special metadata | ||
| - | ||
| -When exporting the document, note the following special metadata: | ||
| - | ||
| -* **author** -- Included as PDF metadata | ||
| -* **byline** -- Replaces author in PDF metadata (e.g., for pen names) | ||
| -* **count** -- Total word count in document, automatically included | ||
| -* **keywords** -- Included as PDF metadata | ||
| -* **title** -- Included as a `<title>` tag, rather than a `<meta>` tag | ||
| - | ||
| -# Quotation marks | ||
| - | ||
| -When converting straight single quotes into curled single quotes, the | ||
| -application offers a variety of entities to use for encoding: | ||
| - | ||
| -* **regular** -- Do not encode. | ||
| -* **modifier** -- Encode as \ʼ, the modifier letter apostrophe. | ||
| -* **apos** -- Encode as \', curled when typeset to PDF. | ||
| -* **aposhex** -- Encode as \', the apostrophe's numeric value. | ||
| -* **quote** -- Encode as \’, the right single quotation mark, which | ||
| -is typically curled in HTML and XHTML documents by default. | ||
| -* **quotehex** -- Encode \’, the right single quotation mark's numeric | ||
| -value. | ||
| - | ||
| -When typsetting into a PDF document, only the semantically correct value | ||
| -of \' will be curled automatically. | ||
| - | ||
| -# History | ||
| - | ||
| -Quotation marks trace back to Ancient Greek, later adopted to the diplé (⸖) | ||
| -circa 625 BCE, foreshadowing its later curve. By the seventeenth century, | ||
| -quotation marks grew common. During the nineteenth century, Western Europe | ||
| -turned the convexity of quotation mark pairs outward. | ||
| - | ||
| -Early mechanical typewriters, circa 1825, lacked many punctuation marks. As | ||
| -technology improved, additional keys were added while some keys played dual | ||
| -roles (such as I for 1). Straight single and double quotes could be co-opted | ||
| -for quotation marks and apostrophes, feet and inches marks, and primes and | ||
| -double-primes. There wasn't a pressing need to type curled versions because | ||
| -humans excel at understanding from context. | ||
| - | ||
| -Eventually straight quotes were codified for computers. Unfortunately, the | ||
| -apostrophe carried with it the baggage from typewriters. That is, burgeoning | ||
| -encoding standards failed to let users capture the nuances of the English | ||
| -language; computers forced users to treat the apostrophe as a straight quote. | ||
| -Standards bodies suggested using the right single quotation mark for an | ||
| -apostrophe instead, shirking off its semantic meaning. Consequently, | ||
| -text containing English quotations, especially British English, is now | ||
| -riddled with ambiguity. | ||
| - | ||
| -Consider the sentence: | ||
| - | ||
| -> Ambiguity lurks in "'cause the horses'". | ||
| - | ||
| -Does `'cause` mean _because_ or _induce_? The answer determines whether | ||
| -an open left single quote is used or an apostrophe, semantically speaking. | ||
| -It's amazing how ancient decisions still affect modern systems. | ||
| - | ||
| -# Introduction | ||
| - | ||
| -This document describes how to use the [R](https://www.r-project.org/) | ||
| -programming language from within the application. The application uses an | ||
| -interpreter known as [Renjin](https://www.renjin.org/) to integrate with R. | ||
| - | ||
| -# Hello world | ||
| - | ||
| -Complete the following steps to see R in action: | ||
| - | ||
| -1. Start the application. | ||
| -1. Click **File → New** to create a new file. | ||
| -1. Click **File → Save As**. | ||
| -1. Set **Name** to: `addition.Rmd` | ||
| -1. Click **Save**. | ||
| - | ||
| -Setting the file name extension tells the application what processor to | ||
| -use when transforming the contents for display in the preview pane. Continue | ||
| -by typing in the following text, including the backticks: | ||
| - | ||
| -```r | ||
| -`r#1 + 1` | ||
| -``` | ||
| - | ||
| -The preview pane shows the result of `1` plus `1`: | ||
| - | ||
| -``` | ||
| -2.0 | ||
| -``` | ||
| - | ||
| -# Bootstrap script | ||
| - | ||
| -Being able to run R code while editing an R Markdown document is convenient. | ||
| -Having the ability to call functions is where the power of R can be | ||
| -leveraged. | ||
| - | ||
| -Complete the following steps to call an R function from your own library: | ||
| - | ||
| -1. Click **File → New** to create a new file. | ||
| -1. Click **File → Save As**. | ||
| -1. Browse to your home directory. | ||
| -1. Set **Name** to: `library.R`. | ||
| -1. Click **Save**. | ||
| -1. Set the contents to: | ||
| - ``` r | ||
| - sum <- function( a, b ) { | ||
| - a + b | ||
| - } | ||
| - ``` | ||
| -1. Click the **Save** icon. | ||
| -1. Click **R → Script**. | ||
| -1. Set the **R Startup Script** contents to: | ||
| - ``` r | ||
| - source( 'library.R' ); | ||
| - ``` | ||
| -1. Click **OK**. | ||
| -1. Create a new file. | ||
| -1. Set the contents to: | ||
| - ``` r | ||
| - `r#sum( 5, 5 )` | ||
| - ``` | ||
| -1. Save the file as `sum.R`. | ||
| - | ||
| -The preview panel shows the result of calling the `sum` function: | ||
| - | ||
| -``` | ||
| -10.0 | ||
| -``` | ||
| - | ||
| -This shows how the bootstrap script can load `library.R`, which defines | ||
| -a `sum` function that is called by name in the Markdown document. | ||
| - | ||
| -# Working directory | ||
| - | ||
| -R files may be sourced from any directory, not just the user's home | ||
| -directory. Accomplish this as follows: | ||
| - | ||
| -1. Click **R → Directory**. | ||
| -1. Set **Directory** to a different directory. | ||
| -1. Click **OK**. | ||
| -1. Create the directory if it does not exist. | ||
| -1. Move `library.R` into the directory. | ||
| -1. Append a new function to `library.R` as follows: | ||
| - ``` r | ||
| - mul <- function( a, b ) { | ||
| - a * b | ||
| - } | ||
| - ``` | ||
| -1. Click **R → Script**. | ||
| -1. Set the **R Startup Script** contents to: | ||
| - ``` r | ||
| - setwd( v$application$r$working$directory ); | ||
| - source( "library.R" ); | ||
| - ``` | ||
| -1. Change `sum.Rmd` to: | ||
| - ``` r | ||
| - `r#mul( 5, 5 )` | ||
| - ``` | ||
| -1. Close the file `sum.Rmd`. | ||
| -1. Confirm saving the file when prompted. | ||
| -1. Re-open `sum.Rmd`. | ||
| - | ||
| -The preview panel shows: | ||
| - | ||
| -``` | ||
| -25.0 | ||
| -``` | ||
| - | ||
| -Calling `setwd` using `v$application$r$working$directory` changes the | ||
| -working directory where the R engine searches for source files. | ||
| - | ||
| -# YAML variable definitions | ||
| - | ||
| -To see how variable definitions work in R, try the following: | ||
| - | ||
| -1. Create a new file. | ||
| -1. Change the contents to (use spaces not tabs): | ||
| - ``` yaml | ||
| - project: | ||
| - title: Project Title | ||
| - author: Author Name | ||
| - ``` | ||
| -1. Save the file as `definitions.yaml`. | ||
| -1. Click **File → Open**. | ||
| -1. Set **Source Files** to **Variable Files**. | ||
| -1. Select `definitions.yaml`. | ||
| -1. Click **Open**. | ||
| -1. Open `sum.Rmd` if it is not already open. | ||
| -1. Type: `je` | ||
| -1. Press `Ctrl+Space` | ||
| - | ||
| -The editor inserts the following text (matches `je` against Pro**je**ct): | ||
| - | ||
| -``` r | ||
| -`r#x( v$project$title )` | ||
| -``` | ||
| - | ||
| -The preview panel shows: | ||
| - | ||
| -``` | ||
| -r#x( 'Project Title' ) | ||
| -``` | ||
| - | ||
| -This is because the application inserts variable reference names based | ||
| -on the type of file being edited. By default, the R engine does not have | ||
| -a function named `x` defined. | ||
| - | ||
| -Continue as follows: | ||
| - | ||
| -1. Click **R → Script**. | ||
| -1. Append the following: | ||
| - ``` r | ||
| - x <- function( s ) { | ||
| - tryCatch( { | ||
| - r = eval( parse( text = s ) ) | ||
| - | ||
| - ifelse( is.atomic( r ), r, s ); | ||
| - }, | ||
| - warning = function( w ) { s }, | ||
| - error = function( e ) { s } ) | ||
| - } | ||
| - ``` | ||
| -1. Click **OK**. | ||
| -1. Close and re-open `sum.Rmd`. | ||
| - | ||
| -The preview panel shows: | ||
| - | ||
| -``` | ||
| -25.0 | ||
| - | ||
| -Project Title | ||
| -``` | ||
| - | ||
| -The `x` function attempts to evaluate the expression defined by the YAML | ||
| -variable. This means that the YAML variables can also include expressions | ||
| -that R is capable of evaluating. | ||
| - | ||
| -While the `x` function can be defined within the R Startup Script, it is | ||
| -better practice to put it into its own library so that it can be reused | ||
| -outside of the application. | ||
| - | ||
| -# Captions and cross-references | ||
| - | ||
| -Users may define captions and cross-references to tables, figures, | ||
| -and equations. Unfortunately, at time of writing, the CommonMark | ||
| -specification is frozen. This means cross-references must be implemented | ||
| -as an extension to the Markdown specification, leaving the door open for | ||
| -differing Markdown rendering libraries and applications to diverge with | ||
| -respect to syntax. | ||
| - | ||
| -# Syntax | ||
| - | ||
| -This section describes how to use captions and cross-references within | ||
| -Markdown documents. The CommonMark standard details different ways to | ||
| -add captions to tables and figures. While those are supported, a more | ||
| -consistent syntax has been implemented. | ||
| - | ||
| -## Captions | ||
| - | ||
| -Tables, figures, and equations are captioned using the same syntax. In | ||
| -general, a line that starts with a double colon after a blank line will | ||
| -result in a caption added to the item immediately preceding it. The | ||
| -remainder of this section provides examples. | ||
| - | ||
| -### Images | ||
| - | ||
| -An image caption: | ||
| - | ||
| -``` | ||
| - | ||
| - | ||
| -:: Figure caption text | ||
| -``` | ||
| - | ||
| -### Table | ||
| - | ||
| -A table caption: | ||
| - | ||
| -``` | ||
| -| a | b | c | | ||
| -|---|---|---| | ||
| -| 1 | 2 | 3 | | ||
| -| 4 | 5 | 6 | | ||
| -| 7 | 8 | 9 | | ||
| - | ||
| -:: Table caption text | ||
| -``` | ||
| - | ||
| -### Equation | ||
| - | ||
| -An equation caption: | ||
| - | ||
| -``` | ||
| -$$E = mc^2$$ | ||
| - | ||
| -:: Equation caption | ||
| -``` | ||
| - | ||
| -# Cross-references | ||
| - | ||
| -There are two parts to a cross-reference: the anchor name and its references. | ||
| -An anchor name must be uniquely defined. Any number of references may refer | ||
| -to an anchor name. Anchor names can be associated with any item in the | ||
| -document, and are primarily added to captions. | ||
| - | ||
| -The general syntax for anchor names and references is: | ||
| - | ||
| -* `{#type-name:label}` (anchor name) | ||
| -* `[@type-name:label]` (reference) | ||
| - | ||
| -The `type-name` can be any alphanumeric value, starting with a letter or | ||
| -ideogram. Type names are user-defined categories for the item type. Labels | ||
| -are user-defined identifiers that must be unique per item. | ||
| - | ||
| -Consider the following example: | ||
| - | ||
| -``` | ||
| -In [@fig:animal], a cute animal is shown. | ||
| - | ||
| - | ||
| - | ||
| -:: World's cutest animal {#fig:animal} | ||
| - | ||
| -There is no cuter animal than the one in [@fig:animal]. | ||
| -``` | ||
| - | ||
| -The anchor name uniquely defines where an item in a document is located. Any | ||
| -number of references, anywhere in the document, may reference an anchor name. | ||
| -There are few restrictions placed on the possible type names and labels. Here | ||
| -are a few more anchor name examples: | ||
| - | ||
| -``` | ||
| -{#fig:cats} | ||
| -{#図版:猫} | ||
| -{#eq:mass-energy} | ||
| -{#eqn:laplace} | ||
| -``` | ||
| - | ||
| -## Type names | ||
| - | ||
| -To avoid duplicating writing the label each time (e.g., Figure, Table, | ||
| -Equation), there are a number of predefined labels associated with | ||
| -type names. The following table lists the type names and the label | ||
| -generated by the typesetting system: | ||
| - | ||
| -| Type name | English name | | ||
| -|-----------|--------------| | ||
| -| algorithm | Algorithm | | ||
| -| alg | Algorithm | | ||
| -| equation | Equation | | ||
| -| eqn | Equation | | ||
| -| eq | Equation | | ||
| -| figure | Figure | | ||
| -| fig | Figure | | ||
| -| formula | Formula | | ||
| -| listing | Listing | | ||
| -| list | Listing | | ||
| -| lst | Listing | | ||
| -| lyric | Lyrics | | ||
| -| music | Score | | ||
| -| score | Score | | ||
| -| source | Listing | | ||
| -| src | Listing | | ||
| -| tab | Table | | ||
| -| table | Table | | ||
| -| tbl | Table | | ||
| - | ||
| -These values are defined in the theme's `xhtml/xml-references.tex` file. | ||
| -# Variables | ||
| - | ||
| -Diagrams that include variables: | ||
| - | ||
| - | ||
| - | ||
| - | ||
| - | ||
| -# PDF themes | ||
| - | ||
| -In the background of the following screenshot, the editor shows a novel | ||
| -being edited: | ||
| - | ||
| - | ||
| - | ||
| -Highlighted items of note: | ||
| - | ||
| -* PDF icon in the upper-left | ||
| -* Novel metadata as integrated variables towards the top-left | ||
| -* Theme selection dialog in the upper-middle | ||
| -* Three different styles, including: | ||
| - * Boschet, based on Baskerville font, nicely styled | ||
| - * Handrit, based on Courier font, double-spaced, manuscript format | ||
| - * Tarmes, based on Times Roman font, minimal styling | ||
| -* Variations in page numbers | ||
| -* Manuscript includes word count, automatically | ||
| -* Preferences dialog in the middle | ||
| - | ||
| -# Internationalization | ||
| - | ||
| -Poem with locale settings: | ||
| - | ||
| - | ||
| - | ||
| -# Equations | ||
| - | ||
| -TeX equations with detached preview: | ||
| - | ||
| - | ||
| - | ||
| -# Dockable tabs | ||
| - | ||
| -Document outline opened and docked in bottom-left corner: | ||
| - | ||
| - | ||
| - | ||
| -# Skins | ||
| - | ||
| -The application provides bundled skins and the ability to add custom | ||
| -skins. This document describes the interplay between bundled skins | ||
| -and building your own look and feel. | ||
| - | ||
| -A skin is a set of styles, similar to cascading style sheet classes, | ||
| -that configures the user interface colours, fonts, spacing, highlights, | ||
| -drop-shadows, gradients, and more. | ||
| - | ||
| -For more information on CSS, see the [W3C CSS tutorial](https://www.w3.org/Style/Examples/011/firstcss). | ||
| - | ||
| -# Order | ||
| - | ||
| -The order that stylesheets are applied matters so that stylesheets can | ||
| -override styles defined previously. The application's user interface | ||
| -is made up of the following stylesheets, applied in the order listed: | ||
| - | ||
| -* **scene.css** --- Defines toolbar styling. | ||
| -* **markdown.css** --- Defines text editor styling. | ||
| -* **skins/skin_name.css** --- Bundled skin selected in preferences. | ||
| -* **custom.css** --- User-defined file set in preferences. | ||
| - | ||
| -# Customization | ||
| - | ||
| -Create a custom skin as follows: | ||
| - | ||
| -1. Start the application. | ||
| -1. Click **File → New** to create a new file. | ||
| -1. Click **File → Save As** to rename the file. | ||
| -1. Save the file as `custom.css`. | ||
| -1. Change the content to the following: | ||
| -``` css | ||
| -.root { | ||
| - -fx-base: rgb( 30, 30, 30 ); | ||
| - -fx-background: -fx-base; | ||
| -} | ||
| -``` | ||
| - | ||
| -Next, apply the skin as follows: | ||
| - | ||
| -1. Click **Edit → Preferences** to open the preferences dialog. | ||
| -1. Click **Skins** to view the available options. | ||
| -1. Click **Browse** to select a custom file. | ||
| -1. Browse to and select `custom.css`, created previously. | ||
| -1. Click **Open**. | ||
| -1. Click **Apply**. | ||
| - | ||
| -The user interface immediately changes to a dark mode. Continue: | ||
| - | ||
| -1. Click **OK** to close the dialog. | ||
| -1. Change the **rgb** numbers in **custom.css** from `30` to `60`. | ||
| -1. Click **File → Save** to save the CSS file. | ||
| - | ||
| -The user interface immediately changes colour. | ||
| - | ||
| -# Classes | ||
| - | ||
| -When creating your own skin, there many classes that can be styled. The | ||
| -previous section showed how to set up a rudimentary skin. Instead, start | ||
| -with a template that already has a number of classes defined so that you | ||
| -can tweak them to your taste. Accomplish this as follows: | ||
| - | ||
| -1. Visit the [skin](https://gitlab.com/DaveJarvis/KeenWrite/-/tree/main/src/main/resources/com/keenwrite/skins) repository directory | ||
| -1. Click one of the files (e.g., `haunted_grey.css`). | ||
| -1. Click **Raw**. | ||
| -1. Copy the entire text. | ||
| -1. Return to `custom.css`. | ||
| -1. Delete the contents. | ||
| -1. Paste the copied text. | ||
| -1. Save the file. | ||
| - | ||
| -To see how the CSS styles are applied to the text editor, open | ||
| -[markdown.css](https://gitlab.com/DaveJarvis/KeenWrite/-/blob/main/src/main/resources/com/keenwrite/editor/markdown.css), which is also in the repository. | ||
| - | ||
| -# Modena | ||
| - | ||
| -The basic look used by the application is _Modena Light_. Typically we | ||
| -only need to override a few classes to completely change the application's | ||
| -look and feel. For a full listing of available styles see the OpenJDK's | ||
| -[Modena CSS file](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css). | ||
| - | ||
| -# JavaFX CSS | ||
| - | ||
| -The [Java CSS Reference Guide](https://openjfx.io/javadoc/21/javafx.graphics/javafx/scene/doc-files/cssref.html) is exhaustive. In addition to showing many | ||
| -differences between JavaFX CSS and W3C CSS, the guide introduces numerous | ||
| -helpful functions for manipulating colours and gradients using existing | ||
| -colour definitions. | ||
| - | ||
| -# RichTextFX | ||
| - | ||
| -The application uses RichTextFX to render the text editor. Styling various | ||
| -text editor classes can require using the prefix `-rtfx` instead of the | ||
| -regular JavaFX `-fx`. | ||
| - | ||
| -# Submit | ||
| - | ||
| -If you have a look that you'd like to contribute to the project, do pass | ||
| -it along. Either open a new issue in the [issue tracker](https://gitlab.com/DaveJarvis/KeenWrite/-/issues) that contains the CSS file or submit a pull request. | ||
| - | ||
| -# Introduction | ||
| - | ||
| -The Scalable Vector Graphics (SVG) drawing software---[Batik](https://xmlgraphics.apache.org/batik/)---that's used by the application may be unable to read certain SVG files produced by [Inkscape](https://inkscape.org/). The result is that embedding the vector graphics files may trigger the following issues: | ||
| - | ||
| -* Unable to create nested element | ||
| -* Black blocks, no text displayed | ||
| -* Black text instead of coloured | ||
| - | ||
| -The remainder of this document explains these problems and how to fix them. | ||
| - | ||
| -# Nested element | ||
| - | ||
| -When referencing a vector graphic using Markdown, the status bar may show the following error: | ||
| - | ||
| -> The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: flowRoot). | ||
| - | ||
| -This error is due to a version mismatch of the `flowRoot` element that Inkscape creates. | ||
| - | ||
| -## Fix | ||
| - | ||
| -Resolve the issue by changing the SVG version number as follows: | ||
| - | ||
| -1. Edit the vector graphics file using any text editor. | ||
| -1. Find `version="1.1"` and change it to `version="1.2"`. | ||
| -1. Save the file. | ||
| - | ||
| -The SVG will now appear inside the application; however, the text may appear as black blocks. | ||
| - | ||
| -# Black blocks | ||
| - | ||
| -Depending on how text is added to a vector graphic in Inkscape, the text may be inserted within an element called a `flowRoot`. Although Batik recognizes `flowRoot` for SVG version 1.2, it cannot fully interpret the contents. Black blocks are drawn instead of the text, such as those depicted in the following figure: | ||
| - | ||
| - | ||
| - | ||
| -## Fix | ||
| - | ||
| -Resolve the issue by "unflowing" all text elements as follows: | ||
| - | ||
| -1. Start Inkscape. | ||
| -1. Load the SVG file. | ||
| -1. Select all the text elements. | ||
| -1. Click **Text → Unflow**. | ||
| - | ||
| -The text may change size and position; recreate the text without dragging using the text tool. After all the text areas have been recreated, continue as follows: | ||
| - | ||
| -1. Click **Edit → XML Editor**. | ||
| -1. Expand the **XML Editor** to see more elements. | ||
| -1. Delete all elements named `svg:flowRoot`. | ||
| -1. Save the file. | ||
| - | ||
| -When the illustration is reloaded, the black blocks will have disappeared, but the text elements ignore any assigned colour. | ||
| - | ||
| -# Black text | ||
| - | ||
| -When an SVG `style` attribute contains a reference to `-inkscape-font-specification`, Batik ignores all values that follow said reference. This results in black text, such as: | ||
| - | ||
| - | ||
| - | ||
| -## Fix | ||
| - | ||
| -Resolve the issue of colourless text as follows: | ||
| - | ||
| -1. Open the SVG file in a plain text editor. | ||
| -1. Remove all references `-inkscape-font-specification:'<FONT>';`, including the trailing (or leading) semicolon. | ||
| -1. Save the file. | ||
| - | ||
| -When the illustration is reloaded, the colours will have reappeared, such as: | ||
| - | ||
| - | ||
| - | ||
| -# Overview | ||
| - | ||
| -Typesetting PDF files entails the following: | ||
| - | ||
| -* Download and install typesetting software | ||
| -* Download a theme pack | ||
| - | ||
| -These are described in the subsequent sections. Once the requirements have been met, continue reading to learn how to typeset a document. | ||
| - | ||
| -# Download typesetter | ||
| - | ||
| -Download the typesetting software as follows: | ||
| - | ||
| -1. Start the text editor. | ||
| -1. Click **File → Export As → PDF**. | ||
| - * Note the following details (e.g., Windows X86 64-bit): | ||
| - * operating system name; | ||
| - * instruction set; and | ||
| - * architecture. | ||
| -1. Click the [link](https://wiki.contextgarden.net/Installation) in the dialog. | ||
| -1. Download the appropriate archive file. | ||
| - | ||
| -# Install typesetter | ||
| - | ||
| -This section describes the installation steps for various platforms. Follow the steps that apply to the computer's operating system: | ||
| - | ||
| -* [Windows](#windows) (includes Windows 7, Windows 10, and similar) | ||
| -* [Unix](#unix) (includes MacOS, FreeBSD, Linux, and similar) | ||
| - | ||
| -## Windows | ||
| - | ||
| -Proceed with a Windows installation of the typesetting software as follows: | ||
| - | ||
| -1. Extract the `.zip` file into `C:\Users\%USERNAME%\AppData\Local\context` (the "root" directory) | ||
| -1. Run **install.bat** to download and install the software. | ||
| - * If prompted, click **Run anyway** (or click **More info** first). | ||
| -1. Right-click [localpath.bat](https://gitlab.com/DaveJarvis/KeenWrite/-/raw/main/scripts/localpath.bat). | ||
| -1. Select **Save Link As** (or similar). | ||
| -1. Save the file to the typesetting software's "root" directory. | ||
| -1. Rename `localpath.bat.txt` to `localpath.bat`, if necessary. | ||
| -1. Run `localpath.bat` (to set and save the `PATH` environment variable). | ||
| - | ||
| -Installation is complete. Verify the installation as follows: | ||
| - | ||
| -1. Type: `context --version` | ||
| -1. Press `Enter`. | ||
| - | ||
| -If version information is displayed then the software is installed correctly. | ||
| - | ||
| -Continue by installing a [theme pack](#theme-pack). | ||
| - | ||
| -## Unix | ||
| - | ||
| -For Linux, MacOS, FreeBSD, and similar operating systems, proceed as follows: | ||
| - | ||
| -1. Create `$HOME/.local/bin/context` | ||
| -1. Extract the `.zip` file within `$HOME/.local/bin/context` | ||
| -1. Run `sh install.sh` | ||
| -1. Add `export PATH=$PATH:$HOME/.local/bin/context/tex/texmf-linux-64/bin` to the login script. | ||
| - | ||
| -Installation is complete. Verify the installation as follows: | ||
| - | ||
| -1. Open a new terminal (to export the new PATH setting). | ||
| -1. Type: `context --version` | ||
| -1. Press `Enter`. | ||
| - | ||
| -If version information is displayed then the software is installed correctly. | ||
| - | ||
| -Continue by installing a [theme pack](#theme-pack). | ||
| - | ||
| -# Theme pack | ||
| - | ||
| -A theme pack is a set of themes that define how documents appear when typeset. Broadly, themes are applied as follows: | ||
| - | ||
| -* Install a theme pack | ||
| -* Configure individual themes | ||
| - | ||
| -## Install theme pack | ||
| - | ||
| -Install and configure the default theme pack as follows: | ||
| - | ||
| -1. Download the <a href="https://gitlab.com/DaveJarvis/keenwrite-themes/-/releases/permalink/latest/downloads/theme-pack.zip">theme-pack.zip</a> archive. | ||
| -1. Extract archive into a known location. | ||
| -1. Start the text editor, if not already running. | ||
| -1. Click **Edit → Preferences**. | ||
| -1. Click **Typesetting**. | ||
| -1. Click **Browse** beside **Themes**. | ||
| -1. Navigate to the `themes` directory. | ||
| -1. Click **Open**. | ||
| -1. Click **OK**. | ||
| - | ||
| -The theme pack is installed. | ||
| - | ||
| -Each theme has its own requirements, described below. | ||
| - | ||
| -## Configure Boschet theme | ||
| - | ||
| -Download and install the following font families: | ||
| - | ||
| -* [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) | ||
| -* [Archivo Narrow](https://fonts.google.com/specimen/Archivo+Narrow) | ||
| -* [Inconsolata](https://fonts.google.com/specimen/Inconsolata) | ||
| - | ||
| -The theme is configured. | ||
| - | ||
| -# Typeset single document | ||
| - | ||
| -Typeset a document as follows: | ||
| - | ||
| -1. Start the text editor, if not already running. | ||
| -1. Click **File → New** (or type `Ctrl+n`). | ||
| -1. Type in some text. | ||
| -1. Click **File → Export As → PDF** (or type `Ctrl+p`). | ||
| -1. Select a theme from the drop-down list. | ||
| -1. Click **OK** (or press `Enter`). | ||
| -1. Set the **File name** to the PDF file name. | ||
| -1. Click **Save**. | ||
| - | ||
| -The document is typeset; open the PDF file in a PDF reader to view the result. | ||
| - | ||
| -# Typeset multiple documents | ||
| - | ||
| -Typeset multiple documents similar to single documents, with one difference: | ||
| - | ||
| -* Click **File → Export As → Joined PDF** (or type `Ctrl+Shift+p`). | ||
| - | ||
| -All documents having the same file name extension in the same directory | ||
| -(or sub-directories) as the actively edited file are first concatenated then | ||
| -typeset into a single PDF document. The order that files are concatenated | ||
| -is numeric and alphabetic. | ||
| - | ||
| -For example, if `1.Rmd` is a sibling of the following files in the same | ||
| -directory, then all the files will be included in the PDF, as expected: | ||
| - | ||
| - chapter_1.Rmd | ||
| - chapter_2.Rmd | ||
| - chapter_2a.Rmd | ||
| - chapter_2b.Rmd | ||
| - chapter_3.Rmd | ||
| - chapter_10.Rmd | ||
| - | ||
| -Basically, sorting honours numbers and letters in file names. | ||
| - | ||
| -# Background | ||
| - | ||
| -This text editor helps keep content separated from presentation. Plain text documents will remain readable long after proprietary formats have become obsolete. However, we've come to expect much more in what we read than mere text: from hyperlinked tables of contents to indexes, from footers to footnotes, from mathematical expressions to complex graphics, modern documents are nuanced and multifaceted. | ||
| - | ||
| -## History | ||
| - | ||
| -Before computer-based typesetting, much of mathematics was put to page by hand. Professional typesetters, who were often expensive and usually not mathematicians, would inadvertently introduce typographic errors into equations. Phototypesetting technology improved upon hand-typesetting, but well-known computer scientist Donald Knuth---whose third volume of *The Art of Computer Programming* was phototypeset in 1976---expressed dissatisfaction with its typographic quality. He set himself two goals: let anyone create high-quality books without much effort and provide software that typesets consistently on all capable computers. Two years later, he released a typesetting system and a font description language: TeX and METAFONT, respectively. | ||
| - | ||
| -In short, TeX is software that helps typeset plain text documents. | ||
| - | ||
| -## ConTeXt | ||
| - | ||
| -Programming computers to typeset internationalized text automatically at the level we've become accustomed takes decades of development effort. Many free and open source software solutions can typeset text, including: ConTeXt, LaTeX, Sile, and others. ConTeXt, which builds upon TeX, is ideal for typesetting plain text into beautiful documents because it is developed with a notion of *setups*. These setups can wholly describe how text is to be typeset and---by being external to the text itself---configuring setups provides ample control over the document's final appearance without changing the prose. | ||
| - | ||
| -# Further reading | ||
| - | ||
| -Here are a few documents that introduce the typesetting system: | ||
| - | ||
| -* [What is ConTeXt?](https://www.pragma-ade.com/general/manuals/what-is-context.pdf) | ||
| -* [A not so short introduction to ConTeXt](https://github.com/contextgarden/not-so-short-introduction-to-context) | ||
| -* [Dealing with XML in ConTeXt MKIV](https://pragma-ade.com/general/manuals/xml-mkiv.pdf) | ||
| -* [Typographic Programming](https://www.pragma-ade.com/general/manuals/style.pdf) | ||
| - | ||
| -The [documentation library](https://wiki.contextgarden.net/Documentation) includes the following gems: | ||
| - | ||
| -* [ConTeXt Manual](https://www.pragma-ade.nl/general/manuals/ma-cb-en.pdf) | ||
| -* [ConTeXt command reference](https://www.pragma-ade.nl/general/qrcs/setup-en.pdf) | ||
| -* [METAFUN Manual](https://www.pragma-ade.nl/general/manuals/metafun-p.pdf) | ||
| -* [It's in the Details](https://www.pragma-ade.nl/general/manuals/details.pdf) | ||
| -* [Fonts out of ConTeXt](https://www.pragma-ade.com/general/manuals/fonts-mkiv.pdf) | ||
| - | ||
| -Expert-level documentation includes the [LuaTeX Reference Manual](https://www.pragma-ade.nl/general/manuals/luatex.pdf). | ||
| - | ||
| -# Typesetting | ||
| - | ||
| -The application uses the [ConTeXt](https://contextgarden.net) typesetting | ||
| -system, the [podman](https://podman.io/) container manager, various | ||
| -[themes](https://gitlab.com/DaveJarvis/keenwrite-themes), and numerous | ||
| -fonts to produce high-quality PDF files. The container manager significantly | ||
| -reduces the number of manual steps in the installation process. | ||
| - | ||
| -When exporting a document to a PDF file for the first time, a series of | ||
| -semi-automated steps guides users through the installation process. These | ||
| -steps differ depending on the operating system. | ||
| - | ||
| -Run the installation wizard as follows: | ||
| - | ||
| -1. Start the application. | ||
| -1. Click **File → Export As → PDF**. | ||
| - | ||
| -Follow the steps in the wizard to install the requisite software and | ||
| -typesetting themes. | ||
| - | ||
| -# Introduction | ||
| - | ||
| -This document describes how to use the application. | ||
| - | ||
| -# Variable definitions | ||
| - | ||
| -Variable definitions provide a way to insert key names having associated values into a document. The variable names and values are declared inside an external file using the [YAML](http://www.yaml.org/) file format. Simply put, variables are written in the file as follows: | ||
| - | ||
| -``` | ||
| -key: value | ||
| -``` | ||
| - | ||
| -Any number of variables can be defined, in any order: | ||
| - | ||
| -``` | ||
| -key_1: Value 1 | ||
| -key_2: Value 2 | ||
| -``` | ||
| - | ||
| -Variables can reference other variables by bookending the key name within symbols: | ||
| - | ||
| -``` | ||
| -key: Value | ||
| -key_1: {{key}} 1 | ||
| -key_2: {{key}} 2 | ||
| -``` | ||
| - | ||
| -Variables can use a nested structure to help group related information: | ||
| - | ||
| -``` | ||
| -novel: | ||
| - title: Book Title | ||
| - author: Author Name | ||
| - isbn: 978-3-16-148410-0 | ||
| -``` | ||
| - | ||
| -Use a period to reference nested keys, such as: | ||
| - | ||
| -``` | ||
| -novel: | ||
| - author: Author Name | ||
| -copyright: | ||
| - owner: {{novel.author}} | ||
| -``` | ||
| - | ||
| -Save the variable definitions in a file having an extension of `.yaml` or `.yml`. | ||
| - | ||
| -# Document editing | ||
| - | ||
| -The application's purpose is to completely separate the document's content from its presentation. To achieve this, documents are composed using a [plain text](http://spec.commonmark.org/0.28/) format. | ||
| - | ||
| -## Create document | ||
| - | ||
| -Start a new document as follows: | ||
| - | ||
| -1. Start the application. | ||
| -1. Click **File → New** to create an empty document to edit. | ||
| -1. Click **File → Open** to open a variable definition file. | ||
| -1. Change **Source Files** to **Variable Files** to list variable definition files. | ||
| -1. Browse to and select a file saved with a `.yaml` or `.yml` extension. | ||
| -1. Click **Open**. | ||
| - | ||
| -The variable definitions appear in the variable definition pane under the heading of **Variables**. | ||
| - | ||
| -## Edit document | ||
| - | ||
| -Edit the document as normal. Notice how the preview pane updates as new content is added. The toolbar shows various icons that perform different formatting operations. Try them to see how they appear in the preview pane. Other operations not shown on the toolbar include: | ||
| - | ||
| -* Struck text (enclose the words within `~~` and `~~`) | ||
| -* Horizontal rule (use `---` on an otherwise empty line). | ||
| - | ||
| -The preview pane shows one way to interpret and format the document, but many other presentations are possible. | ||
| - | ||
| -## Insert variable | ||
| - | ||
| -Let's assume that the variable definitions loaded into the application include: | ||
| - | ||
| -``` | ||
| -novel: | ||
| - title: Diary of {{novel.author}} | ||
| - author: Anne Frank | ||
| -``` | ||
| - | ||
| -To reference a variable, type in the key name enclosed within double braces, such as: | ||
| - | ||
| -``` | ||
| -The novel "{{novel.title}}" is one of the most widely read books in the world. | ||
| -``` | ||
| - | ||
| -The preview pane shows: | ||
| - | ||
| -> The novel "Diary of Anne Frank" is one of the most widely read books in the world. | ||
| - | ||
| -As it is laborious to type in variable names, it is possible to inject the variable name using autocomplete. Accomplish this as follows: | ||
| - | ||
| -1. Create a new file. | ||
| -1. Type in a partial variable value, such as **Dia**. | ||
| -1. Press `Ctrl+Space` (hold down the `Control` key and tap the spacebar). | ||
| - | ||
| -The editor shows: | ||
| - | ||
| -``` | ||
| -{{novel.title}} | ||
| -``` | ||
| - | ||
| -The preview pane shows: | ||
| - | ||
| -``` | ||
| -Diary of Anne Frank | ||
| -``` | ||
| - | ||
| -The variable name is inserted into the document and the preview pane shows the variable's value. | ||
| - | ||