Text Editor and Syntax Highlighting

Opening the Editor

Select Editor from the mode selector.
Click Open to load an existing file, or begin with the empty editor.
Select a language if needed.
Edit the text.
Enter an output filename.
Click Save.

Editor Features

Feature	Description
Syntax Highlighting	Colors recognized syntax according to the language mode
Line Numbers	Displays numbered lines
Line Wrapping	Wraps long lines within the editor
Active-Line Highlighting	Highlights the current editing line
Automatic Language Detection	Uses file extensions to select syntax modes
Manual Language Selection	Allows the user to choose a language
UTF-8 Saving	Encodes text as UTF-8 when saving

ETWriter uses the Darcula CodeMirror theme in the supplied implementation.

Automatic Language Detection

The language selector includes:

Auto (from filename)

When Auto is selected, ETWriter examines the loaded filename extension and chooses an appropriate CodeMirror mode.

Examples:

Filename	Detected Language
`app.js`	JavaScript
`component.tsx`	TSX
`config.json`	JSON
`index.html`	HTML
`styles.css`	CSS
`README.md`	Markdown
`settings.yaml`	YAML
`main.py`	Python
`program.go`	Go
`Cargo.toml`	TOML

Unrecognized extensions default to plain-text highlighting.

Manual Language Selection

You can override automatic detection using the language selector.

Supported options include:

Plain Text
JavaScript
TypeScript
JSX
TSX
JSON
HTML
CSS
Markdown
XML
YAML
Shell
Python
Java
C/C++
Go
Rust
TOML/INI/Conf

The selected language changes the editor's highlighting mode. It does not translate the file, compile the source code, or change the underlying programming language.

JavaScript Editing

Select JavaScript for .js, .mjs, or .cjs files.

Example:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

The editor provides syntax coloration when the JavaScript mode is available.

JSON Editing

Select JSON for structured configuration data.

Example:

{
  "application": "ETWriter",
  "settings": {
    "theme": "darcula",
    "lineNumbers": true
  }
}

JSON syntax highlighting is supported.

ETWriter does not implement a dedicated JSON validation command in its supplied editor code.

HTML and CSS Editing

ETWriter supports HTML and CSS highlighting.

HTML example:

<section class="welcome">
  <h1>Welcome to ETWriter</h1>
</section>

CSS example:

.welcome {
  padding: 2rem;
  color: #16f2c3;
}

Markdown Editing

Markdown files are supported through the Markdown highlighting mode.

Example:

# Project Notes

## Tasks

- Review source code
- Update configuration
- Save changes

Markdown is edited as source text. The supplied application does not provide a separate rendered Markdown preview.

Language Status Badge

ETWriter displays a language badge with a color associated with the selected mode.

For example, JavaScript, Python, and HTML have different badge colors.

The badge is an interface aid, not a syntax validation result.

CodeMirror Fallback

If CodeMirror cannot be loaded, ETWriter falls back to an ordinary text area.

Basic text editing remains possible, but advanced CodeMirror features such as syntax highlighting and line numbers will not be available.

Important Limitations

The supplied text editor is not a full integrated development environment.

It does not provide dedicated implementations of:

Code execution
Compilation
Debugging
Project-wide symbol navigation
Integrated version control
Automatic source formatting

Syntax highlighting is a visual editing feature and does not guarantee that code is valid.

Saving Changes

Enter an output filename, then select Save.

All text is encoded as UTF-8 before being written to the output file or downloaded.

Tip: For configuration files and source code, keep the correct filename extension so ETWriter can select the expected highlighting mode the next time you open the file.