code2svg

A minimalistic converter that transforms code into SVG text with syntax highlighting.

Modules

The project is splitted into three separate modules: The core library, a maven plugin and the standalone application.

Core Library Java library that can be used within your own programs
Maven Plugin Maven plugin that allows integrating the converter in your build.
Application Simple Java command line application to run the converter.

Overview

@code2svg:{"width":800, "height": 300}
/**
 * ISO 3166-1 alpha-3 three-letter country code defined in ISO 3166-1.
 */
value-object °°x2777°° Alpha3CountryCode base String {
    
    label "Alpha-3 country code" // Used in UI 
    
    /** Internal value. */
    String value invariants Length(3, 3)
    
}

Example output:

(Caution: Image might be broken in Internet Explorer and Edge - Try Firefox or Chromium)

Configuration

The highlighting is configured using a simple XML file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<code2svg file-extension=".ddd" width="800" height="800">
    <file-configs>
        <file-config name=".*/Alpha3CountryCode\.ddd" width="800" height="600"/>
    </file-configs>
	<reg-expr-element name="whatever" css="fill: red" pattern="begin.*end" />
	<ml-comment-element name="ml-comment" css="fill: rgb(63, 127, 95)" />
	<sl-comment-element name="sl-comment" css="fill: rgb(63, 127, 95)" />
	<string-element name="string" css="fill: rgb(42, 0, 255)" single="false" />
	<number-element name="number" css="fill: rgb(125, 125, 125)" />
	<keyword-element name="keyword" css="fill: rgb(127, 0, 85); font-weight: bold">
		<keyword>value-object</keyword>
		<keyword>base</keyword>
		<keyword>label</keyword>
		<keyword>invariants</keyword>
	</keyword-element>
</code2svg>

file-extension is used for locating the code files inside a directory.
width defines the default width used for all generated SVG images. You can overwrite it by setting a width/height per file (See below).
height defines the default height used for all generated SVG images. You can overwrite it by setting a width/height per file (See below).
name is a unique identifier that will be used in the SVG markup as a CSS class.
css is the CSS for the class that will be used to style the element.
file-configs optional list of file configurations
file-config if the name of the source model file matches the name regular expression, the given width and height are applied to the target SVG. This is an alternative to using the tag @code2svg:{"width":800, "height": 300} directly inside the model file.

reg-expr-element

Uses a regular expression to identify the part to be styled in the source code. The pattern attribute defines the pattern for locating the code fragments to style.

ml-comment-element

Locates multi line comments in the source code:

/**
 * My comment
 */

sl-comment-element

Locates single line comments in the source code:

// Whatever
Integer a
String b // Comment

string-element

Locates a string either with single (single="true") or double quotes (single="false" or attribute not present).

number-element

Used to locate numeric values in the source code.

keyword-element

Used to locate keywords in the source code.

Overwrite default width and height

You can overwrite the default width and height from the XML configuration adding @code2svg:{"width":800, "height": 300} somewhere in the source file.

Defining XML entity chars

Sometimes it's handy to insert some XML character entities in the source code.

Example: ❺ can be added as °°x277A°° in the source and will be rendered as ❺

Limitations

The order of the tags in the XML configuration determines the order in which source code fragments are replaced. Elements that are used to locate large blocks of text (like comments) should be evaluated first to avoid finding other elements in that area. Example: Keywords, strings or numbers that are within a comment.

Snapshots

Snapshots can be found on the OSS Sonatype Snapshots Repository.

Add the following to your .m2/settings.xml to enable snapshots in your Maven build:

<repository>
    <id>sonatype.oss.snapshots</id>
    <name>Sonatype OSS Snapshot Repository</name>
    <url>http://oss.sonatype.org/content/repositories/snapshots</url>
    <releases>
        <enabled>false</enabled>
    </releases>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
</repository>

fuinorg / code2svg