Plain Vanilla

The project is designed to be served as a static website from the public/ directory. You can use any of the following commands to host the site locally depending on your installed environment:

# Using Node.js (http-server)
npx http-server public -c-1

# Using PHP
php -S localhost:8000 -t public

# Using Python 3
python3 -m http.server 8000 --directory public

If you have a string that is already safe or contains intentional HTML markup that should not be encoded, wrap it in htmlRaw(). This marks the string as an instance of the Html class, which tells the html template tag to skip encoding for that specific value.

import { html, htmlRaw } from './lib/html.js';

const safeMarkup = htmlRaw'<strong>Important</strong>';
const template = html`<div>${safeMarkup}</div>`;
// Result: "<div><strong>Important</strong></div>"

The tokenize function is the low-level engine that traverses a source string and identifies tokens based on a language definition. It executes a callback for every identified token.

Parameters:

• src (string): The source code.
• lang (ShjLanguage | Array): A language identifier string (which triggers an async import) or an array of ShjLanguageComponent objects.
• token (function): A callback function called for each token. Signature: (text: string, type: ShjToken) => void.

Token Types (ShjToken): 'deleted' | 'err' | 'var' | 'section' | 'kwd' | 'class' | 'cmnt' | 'insert' | 'type' | 'func' | 'bool' | 'num' | 'oper' | 'str' | 'esc'

await tokenize('const x = 1;', 'js', (text, type) => {
  console.log(`Token: ${text}, Type: ${type}`);
});

The pushState function allows you to manually trigger navigation. It updates the browser's history stack and dispatches a popstate event to the routerEvents target, which in turn triggers all active <view-route> elements to update their matching state.

Signature: pushState(state, unused, url)

import { pushState } from './view-route.js';

// Navigate to a new URL
pushState(null, null, '/new-page');

Use highlightText to convert a raw code string into an HTML string with syntax highlighting applied. It supports multiline wrapping and customization via options.

Parameters:

• src (string): The raw code content.
• lang (ShjLanguage): The language identifier (e.g., 'js', 'css', 'python').
• multiline (boolean, default: true): If true, wraps the output in <div> elements suitable for line numbering.
• opt (ShjOptions, default: {}): Configuration object.

Options (ShjOptions):

• hideLineNumbers (boolean): If true, prevents the generation of line number placeholders.

Returns: A Promise<string> containing the HTML content.

const code = 'const x = 10;';
const highlighted = await highlightText(code, 'js');
// Or with options
const highlightedWithNoLines = await highlightText(code, 'js', true, { hideLineNumbers: true });

Use highlightAll to scan the entire document for any elements containing a class name that starts with shj-lang- and apply syntax highlighting to them automatically.

// Highlights all <div class="shj-lang-ts">...</div> elements in the document
await highlightAll({ hideLineNumbers: false });

The html function acts as a tagged template literal that automatically encodes HTML entities in interpolated values. This prevents XSS by ensuring that characters like <, >, and & are converted to their safe HTML entity equivalents (e.g., <, >, &).

import { html } from './lib/html.js';

const userInput = '<img src=x onerror=alert(1)>';
const template = html`<div>${userInput}</div>`;

// template will be: "<div>&lt;img src=x onerror=alert(1)&gt;</div>"

The TasksContext module provides a React context-based state management system for tasks. To use it, wrap your component tree with TasksProvider. This enables child components to access the current list of tasks via useTasks() and trigger state updates via useTasksDispatch().

import { TasksProvider, useTasks, useTasksDispatch } from './TasksContext';

function App() {
  return (
    <TasksProvider>
      <TaskList />
    </TasksProvider>
  );
}

function TaskList() {
  const tasks = useTasks();
  const dispatch = useTasksDispatch();

  // Example: adding a task
  const addTask = () => dispatch({ type: 'added', id: 3, text: 'New Task' });

  return (
    <div>
      {tasks.map(task => <div key={task.id}>{task.text}</div>)}
      <button onClick={addTask}>Add Task</button>
    </div>
  );
}