Build VSCode syntax highlighter for Slashdown

vscode-slashdown/.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/node_modules/**
+**/*.map
+**/.eslintrc.json
+**/*.ts
+!**/*.d.ts

vscode-slashdown/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to the "slashdown" extension will be documented in this file.
+
+## [0.1.0] - 2025-11-15
+
+### Added
+- Initial release of Slashdown syntax highlighting
+- Tag syntax highlighting (`/tagname`)
+- ID highlighting (`#id-name`)
+- Class highlighting (`.class-name`)
+- Attribute highlighting (`key="value"` and boolean attributes)
+- Inline text content highlighting (`= text`)
+- Comment support (`//`)
+- Code fence support with language-specific syntax highlighting
+- Full markdown syntax support:
+  - Headings (h1-h6)
+  - Bold and italic text
+  - Inline code
+  - Links
+  - Ordered and unordered lists
+- Language configuration for auto-closing pairs and comment toggling
+- Folding support for tag blocks

vscode-slashdown/README.md

@@ -0,0 +1,160 @@
+# Slashdown for Visual Studio Code
+
+Syntax highlighting for Slashdown - "For when MDX is too much, but Markdown is too little."
+
+## Features
+
+This extension provides comprehensive syntax highlighting for Slashdown files, including:
+
+- **Tag syntax**: `/tagname` with proper highlighting for HTML-like tags
+- **IDs**: `#id-name` highlighting
+- **Classes**: `.class-name` highlighting
+- **Attributes**: Support for both `key="value"` and boolean attributes
+- **Text content**: `= inline text` syntax
+- **Comments**: `//` line comments
+- **Code fences**: Triple backtick code blocks with language-specific syntax highlighting
+- **Markdown**: Full markdown support including:
+  - Headings (h1-h6)
+  - Bold and italic text
+  - Inline code
+  - Links
+  - Lists (ordered and unordered)
+
+## Usage
+
+Create a file with a `.sd` or `.slashdown` extension and start writing Slashdown:
+
+```slashdown
+/header .flex.justify-between
+  # Slashdown
+  [Get it](#)
+
+/ul .grid.grid-cols-3
+
+  /li
+    ### Easy to read
+    - lots of space
+
+  /li
+    ### Fast to write
+    - type, type, type
+
+  /li
+    ### You already know it
+    - Just markdown with extra oomph
+```
+
+## Slashdown Syntax Overview
+
+### Tags
+Start a tag with `/` followed by the tag name:
+```slashdown
+/div
+/header
+/button
+```
+
+Use `/` alone as shorthand for `div`:
+```slashdown
+/ #container .wrapper
+```
+
+### IDs and Classes
+Add IDs with `#` and classes with `.`:
+```slashdown
+/header #main-header .flex.justify-between
+```
+
+### Attributes
+Add attributes on the same line or on following lines:
+```slashdown
+/button = Click me
+  hx-post="/api/roll"
+  hx-trigger="click"
+  class="bg-blue-500"
+  disabled
+```
+
+### Text Content
+Use `=` for inline text content:
+```slashdown
+/h1 = Hello World
+/p = This is a paragraph
+```
+
+### Markdown
+Regular markdown works anywhere:
+```slashdown
+/article
+  # Main Heading
+
+  This is a paragraph with **bold** and *italic* text.
+
+  - List item 1
+  - List item 2
+```
+
+### Code Fences
+Triple backticks work as expected:
+````slashdown
+/div
+  Here's some code:
+
+  ```javascript
+  console.log('Hello, world!');
+  ```
+````
+
+### Comments
+Use `//` for line comments:
+```slashdown
+// This is a comment
+/div
+  // This is also a comment
+  # Not a comment
+```
+
+## Installation
+
+### From VSIX
+1. Download the `.vsix` file from the releases
+2. Open VSCode
+3. Go to Extensions (Ctrl+Shift+X)
+4. Click the "..." menu at the top
+5. Select "Install from VSIX..."
+6. Choose the downloaded `.vsix` file
+
+### From Source
+1. Clone this repository
+2. Run `npm install -g @vscode/vsce` if you don't have it
+3. Run `vsce package` in the extension directory
+4. Install the generated `.vsix` file as described above
+
+## Requirements
+
+- Visual Studio Code 1.75.0 or higher
+
+## Known Issues
+
+None at this time. Please report issues on the [GitHub repository](https://github.com/nickisnoble/slashdown).
+
+## Release Notes
+
+### 0.1.0
+
+Initial release of Slashdown syntax highlighting:
+- Tag syntax highlighting
+- ID and class highlighting
+- Attribute highlighting
+- Inline text content
+- Markdown support
+- Code fence support with language-specific highlighting
+- Comment support
+
+## About Slashdown
+
+Slashdown is a markup language that combines the simplicity of Markdown with HTML-like tag syntax. Learn more at [github.com/nickisnoble/slashdown](https://github.com/nickisnoble/slashdown).
+
+## License
+
+MIT

vscode-slashdown/example.sd

@@ -0,0 +1,77 @@
+// This is a comment
+// Example Slashdown file to test syntax highlighting
+
+/header .flex.justify-between #main-header
+  # Slashdown Syntax Example
+  [Get it on GitHub](https://github.com/nickisnoble/slashdown)
+
+/ .container
+  /section #introduction
+    ## What is Slashdown?
+
+    Slashdown combines **Markdown** with *HTML-like* tags for more structured documents.
+
+    - Easy to read
+    - Fast to write
+    - Powerful and flexible
+
+  /section #examples
+    ## Examples
+
+    ### Basic Tag
+    /div = This is a div with inline text
+
+    ### Tag with Classes and IDs
+    / #hero .bg-blue-500.text-white.p-4
+      # Welcome!
+      Click the button below to get started.
+
+      /button = Get Started
+        class="bg-white text-blue-500 px-4 py-2 rounded"
+        onclick="handleClick()"
+
+    ### HTMX Example
+    / #roll-result
+    /button = Roll Dice
+      hx-post="/api/roll?sides=6"
+      hx-trigger="click"
+      hx-target="#roll-result"
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+
+    ### Code Fence
+    Here's some JavaScript code:
+
+    ```javascript
+    function greet(name) {
+      console.log(`Hello, ${name}!`);
+    }
+
+    greet('World');
+    ```
+
+    And some HTML:
+
+    ```html
+    <div class="container">
+      <h1>Hello World</h1>
+    </div>
+    ```
+
+  /section #markdown-support
+    ## Full Markdown Support
+
+    You can use all standard markdown features:
+
+    1. Ordered lists
+    2. With multiple items
+    3. Like this
+
+    **Bold text**, *italic text*, and `inline code`.
+
+    > Blockquotes work too!
+
+    [Links are supported](https://example.com)
+
+/footer .mt-8.text-center
+  Made with ❤️ in Slashdown
+  /a href="https://miniware.team?ref=slashdown" target="_blank" = by Miniware

vscode-slashdown/language-configuration.json

@@ -0,0 +1,38 @@
+{
+  "comments": {
+    "lineComment": "//"
+  },
+  "brackets": [
+    ["[", "]"],
+    ["(", ")"],
+    ["{", "}"]
+  ],
+  "autoClosingPairs": [
+    { "open": "[", "close": "]" },
+    { "open": "(", "close": ")" },
+    { "open": "{", "close": "}" },
+    { "open": "\"", "close": "\"" },
+    { "open": "'", "close": "'" },
+    { "open": "`", "close": "`" }
+  ],
+  "surroundingPairs": [
+    ["[", "]"],
+    ["(", ")"],
+    ["{", "}"],
+    ["\"", "\""],
+    ["'", "'"],
+    ["`", "`"],
+    ["*", "*"],
+    ["_", "_"]
+  ],
+  "folding": {
+    "markers": {
+      "start": "^\\s*/",
+      "end": "^\\s*$"
+    }
+  },
+  "indentationRules": {
+    "increaseIndentPattern": "^\\s*/.*$",
+    "decreaseIndentPattern": "^\\s*$"
+  }
+}

vscode-slashdown/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "slashdown",
+  "displayName": "Slashdown",
+  "description": "Syntax highlighting for Slashdown - Markdown with HTML-like tags",
+  "version": "0.1.0",
+  "publisher": "slashdown",
+  "icon": "icon.png",
+  "engines": {
+    "vscode": "^1.75.0"
+  },
+  "categories": [
+    "Programming Languages"
+  ],
+  "keywords": [
+    "slashdown",
+    "markdown",
+    "markup",
+    "syntax highlighting"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nickisnoble/slashdown"
+  },
+  "contributes": {
+    "languages": [
+      {
+        "id": "slashdown",
+        "aliases": [
+          "Slashdown",
+          "slashdown",
+          "sd"
+        ],
+        "extensions": [
+          ".sd",
+          ".slashdown"
+        ],
+        "configuration": "./language-configuration.json",
+        "icon": {
+          "light": "./icon.png",
+          "dark": "./icon.png"
+        }
+      }
+    ],
+    "grammars": [
+      {
+        "language": "slashdown",
+        "scopeName": "text.slashdown",
+        "path": "./syntaxes/slashdown.tmLanguage.json"
+      }
+    ]
+  }
+}