Skip to content

Commit

Permalink
Add documentation for themes. (#24)
Browse files Browse the repository at this point in the history
  • Loading branch information
floitsch authored Jul 6, 2024
1 parent ca95dbf commit 3797d50
Show file tree
Hide file tree
Showing 9 changed files with 596 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
Empty file added docs/schemas/.nojekyll
Empty file.
129 changes: 129 additions & 0 deletions docs/schemas/theme/v1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
{
"$schema": "http://json-schema.org/draft-2020-12/schema",
"$id": "https://code-syntax-addon.github.io/code-syntax/schemas/theme/v1.json",
"title": "Code Syntax Theme",
"description": "Theme format for the code syntax highlighting add-on.",
"type": "object",
"$ref": "#/$defs/Theme",
"$defs": {
"Theme": {
"type": "object",
"properties": {
"$schema": {
"type": "string",
"format": "uri",
"const": "https://code-syntax-addon.github.io/code-syntax/schemas/theme/v1.json"
},
"$comment": {
"type": "string"
},
"description": {
"type": "string"
},
"default": {
"description": "The default style for all code.",
"$ref": "#/$defs/StyleOrColor"
},
"codeMirror": {
"description": "The default syntax highlighting for code sections.",
"$ref": "#/$defs/CodeMirror"
},
"spans": {
"description": "The style for span elements.",
"type": "object",
"propertyNames": {
"enum": ["path", "number", "string", "keyword", "ipv4", "rest"]
},
"additionalProperties": { "$ref": "#/$defs/StyleOrColor" }
},
"modes": {
"description": "Configurations for specific languages.",
"type": "object",
"propertyNames": {
"enum": [
"none", "toit", "dart", "shell", "go", "python", "yaml", "c", "c++", "css",
"js", "jsx", "ts", "json", "java", "kotlin", "c#", "objective-c", "scala",
"html", "xml", "dockerfile", "julia", "rust", "r"
]
},
"additionalProperties": { "$ref": "#/$defs/Mode" }
}
},
"additionalProperties": false
},
"StyleOrColor": {
"description": "The style for a specific element. Either a color string a style object.",
"oneOf": [
{
"type": "string",
"pattern": "^#[0-9A-Fa-f]{6}$"
},
{
"$ref": "#/$defs/Style"
}
]
},
"Style": {
"description": "A style object.",
"type": "object",
"properties": {
"fontFamily": {
"description": "The font family for the element.",
"type": "string"
},
"italic": {
"description": "Whether the element should be italic.",
"type": "boolean"
},
"bold": {
"description": "Whether the element should be bold.",
"type": "boolean"
},
"foreground": {
"description": "The color of the text.",
"type": "string",
"pattern": "^#[0-9A-Fa-f]{6}$"
},
"background": {
"description": "The background color.",
"type": "string",
"pattern": "^#[0-9A-Fa-f]{6}$"
}
},
"additionalProperties": false
},
"Mode": {
"description": "The configuration for a specific language.",
"type": "object",
"properties": {
"modeColor": {
"description": "The background color for code blocks. Must be unique per mode.",
"type": "string",
"pattern": "^#[0-9A-Fa-f]{6}$"
}
},
"style": {
"description": "The style for every element that doesn't have a code-mirror style.",
"$ref": "#/$defs/StyleOrColor"
},
"codeMirror": {
"description": "The syntax highlighting for this mode.",
"$ref": "#/$defs/CodeMirror"
}
},
"CodeMirror": {
"description": "The syntax highlighting for code sections. The keys are the CodeMirror classes.",
"type": "object",
"propertyNames": {
"enum": [
"header", "quote", "negative", "positive", "strong", "em", "keyword",
"atom", "number", "def", "variable", "punctuation", "property",
"operator", "variable-2", "variable-3", "type", "comment", "string",
"string-2", "meta", "qualifier", "builtin", "bracket", "tag",
"attribute", "hr", "link", "error", "invalidchar"
]
},
"additionalProperties": { "$ref": "#/$defs/StyleOrColor" }
}
}
}
30 changes: 30 additions & 0 deletions docs/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ There are three primary functions accessible from the add-on menu:
1. **Colorize**
2. **Colorize selection as**
3. **Change mode to**
4. **Advanced**

---

Expand Down Expand Up @@ -95,6 +96,20 @@ If you now want to change the highlighting to Python, proceed as follows:

This menu option does nothing if the cursor is not in a code section.

#### Advanced

The "Advanced" menu item allows you to change the default theme of the
user, or to set the theme for the current document.

See the [Themes](themes.html) page for more information on to create
your own themes.

The menu items in this section are:
- Show themes: Shows the current configuration. One section for the
user's default theme and one for the document's theme.
- Set document theme: Sets the theme for the current document.
- Set user theme: Sets the default theme for the user.

## Google Slides

The Code Syntax add-on for Google Slides allows you to write
Expand All @@ -115,6 +130,7 @@ There are four primary functions accessible from the add-on menu:
1. **Colorize Slide**
2. **Colorize selection as**
3. **Change mode to**
4. **Advanced**

---

Expand Down Expand Up @@ -190,3 +206,17 @@ If you now want to change the highlighting to Python, proceed as follows:
|![Before](screens/support15.png) | ![After](screens/support16.png)|

This menu option does nothing if the cursor is not in a code section.

#### Advanced

The "Advanced" menu item allows you to change the default theme of the
user, or to set the theme for the current document.

See the [Themes](themes.html) page for more information on to create
your own themes.

The menu items in this section are:
- Show themes: Shows the current configuration. One section for the
user's default theme and one for the document's theme.
- Set document theme: Sets the theme for the current document.
- Set user theme: Sets the default theme for the user.
106 changes: 106 additions & 0 deletions docs/theme-gallery.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
# Theme Gallery

This page contains a gallery of themes, together with their theme-string.

We encourage contributions as pull requests to the [GitHub repository](
https://github.com/code-syntax-addon/code-syntax).

See the [Themes](themes.html) page for more information on how to create your own themes.

## Courier New

Overrides the default font for code to "Courier New".

```json
{
"default": {
"fontFamily": "Courier New"
}
}
```

![Courier New](theme-screens/font-courier-new.png)

## Dark Shell

Changes the background color for the 'shell' mode to (almost) black,
and adjusts the default style and the codeMirror syntax highlighting rules.

```json
{
"modes": {
"shell": {
"modeColor": "#000101",
"style": {
"foreground": "#ffffff"
},
"codeMirror": {
"header": {
"bold": true,
"foreground": "#00ff00"
},
"quote": "#80ff80",
"negative": "#ff4040",
"positive": "#40ff40",
"strong": {
"bold": true
},
"em": {
"italic": true
},
"keyword": {
"bold": true,
"foreground": "#ff80ff"
},
"atom": "#a0a0ff",
"number": "#80ff80",
"def": "#8080ff",
"variable": "#40c8ff",
"punctuation": "#70c0ff",
"property": "#ff8c40",
"operator": {
"bold": true,
"foreground": "#ff55ff"
},
"variable-2": "#80a0ff",
"variable-3": "#40ff80",
"type": "#40ff80",
"comment": {
"italic": true,
"foreground": "#ff8000"
},
"string": "#ff4040",
"string-2": "#ff7040",
"meta": "#a0a0a0",
"qualifier": "#a0a0a0",
"builtin": "#8080ff",
"bracket": "#c0c0a0",
"tag": "#40ff40",
"attribute": "#80c0ff",
"hr": "#c0c0c0",
"link": "#80c0ff",
"error": "#ff2020",
"invalidchar": "#ff2020"
}
}
}
}
```

![Dark Shell](theme-screens/dark-shell.png)

## Python with Green Background

Changes the background color for the 'python' mode to a light green.

```json
{
"modes": {
"python": {
"modeColor": "#f7fff8"
}
}
}
```

![Python with Green Background](theme-screens/green-python.png)
Binary file added docs/theme-screens/dark-shell.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/theme-screens/font-courier-new.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/theme-screens/green-python.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 3797d50

Please sign in to comment.