Basic Usage
Simple Object Creation
const Mark = require('mark-js');
// Create a simple greeting
const greeting = Mark('greeting', { lang: 'en' }, ['Hello, World!']);
console.log(Mark.stringify(greeting));
// Output: <greeting lang:"en"; "Hello, World!">
// Parse it back
const parsed = Mark.parse(`<greeting lang:"en"; "Hello, World!">`);
console.log(parsed.lang); // "en"
console.log(parsed[0]); // "Hello, World!"
Working with Properties
// Configuration object
const config = Mark.parse(`<config
<database
host:"localhost",
port:5432,
ssl:true
>
<api
version:"v1",
timeout:5000
>
>`);
// Access nested properties
console.log(config.database.host); // "localhost"
console.log(config.api.version); // "v1"
HTML Forms
Contact Form
const contactForm = Mark.parse(`<form
method:"POST",
action:"/contact"
<fieldset
<legend "Contact Information">
<div class:"form-group"
<label for:name; "Full Name *">
<input
type:text,
id:name,
name:name,
required:true
>
>
<div class:"form-group"
<label for:email; "Email Address *">
<input
type:email,
id:email,
name:email,
required:true
>
>
<div class:"form-actions"
<button type:submit; "Send Message">
<button type:reset; "Clear Form">
>
>
>`);
// Access form elements
console.log(contactForm.method); // "POST"
console.log(contactForm.action); // "/contact"
Dynamic Form Generation
// Form schema
const formSchema = Mark.parse(`<'form-schema'
title:"User Registration"
<field name:"username", type:"text", label:"Username", required:true>
<field name:"email", type:"email", label:"Email Address", required:true>
>`);
// Generate form from schema
function generateForm(schema) {
const form = Mark('form');
if (schema.title) {
form.push(Mark('h2', null, [schema.title]));
}
for (let i = 0; i < schema.length; i++) {
const field = schema[i];
if (field.constructor.name === 'field') {
const formGroup = Mark('div', { class: 'form-group' });
formGroup.push(Mark('label', { for: field.name }, [field.label]));
const input = Mark('input', {
type: field.type,
id: field.name,
name: field.name,
required: field.required
});
formGroup.push(input);
form.push(formGroup);
}
}
form.push(Mark('button', { type: 'submit' }, ['Register']));
return form;
}
Configuration Files
Application Configuration
const appConfig = Mark.parse(`<config
<app
name:"MyApp",
version:"1.2.3",
environment:"production",
debug:false
>
<server
host:"0.0.0.0",
port:8080
<ssl
enabled:true,
cert:"/path/to/cert.pem",
key:"/path/to/key.pem"
>
>
<database
type:"postgresql",
host:"db.example.com",
port:5432,
name:"myapp_prod"
<credentials
username:"app_user",
password:"secure_password"
>
>
>`);
// Access configuration values
console.log(appConfig.app.name); // "MyApp"
console.log(appConfig.server.port); // 8080
Build Configuration
const buildConfig = Mark.parse(`<build
input:"src/index.js"
<output
path:"dist",
filename:"bundle.js"
>
<plugins
<babel
presets:["@babel/preset-env"]
>
<webpack
mode:"production"
<optimization
minimize:true,
splitChunks:true
>
>
>
>`);
Document Markup
Article with Mixed Content
const article = Mark.parse(`<article
<header
<h1 "Getting Started with Mark Notation">
<meta
author:"Jane Developer",
published:"2025-01-15",
tags:["tutorial", "markup", "javascript"]
>
>
<section class:"introduction"
<p
"Mark Notation is a " <em "unified notation"> " for both object and markup data. "
"Unlike " <code "JSON"> ", which is limited to object data, Mark provides a "
<strong "generic solution"> " that combines the best of both worlds."
>
>
<section class:"features"
<h2 "Key Features">
<ul
<li <strong "Type Safety"> " - Every object has a meaningful type name">
<li <strong "Mixed Content"> " - Combine structured data with text">
<li <strong "Clean Syntax"> " - More readable than JSON or XML">
>
>
>`);
// Extract metadata
function extractMetadata(article) {
const meta = article.header.meta;
return {
title: article.header.h1[0],
author: meta.author,
published: meta.published,
tags: meta.tags
};
}
Template Examples
Email Template
const emailTemplate = Mark.parse(`<email
<header
from:"noreply@example.com",
to:"",
subject:"Welcome to , !"
>
<body
<div class:"container"
<h1 "Welcome !">
<p "Thank you for signing up for " <strong ""> ". "
"We're excited to have you on board!">
<div class:"cta"
<a href:"/dashboard", class:"button primary"; "Get Started">
>
>
>
>`);
// Template rendering function
function renderTemplate(template, data) {
const rendered = Mark.stringify(template);
return rendered.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
const keys = path.split('.');
let value = data;
for (let key of keys) {
value = value && value[key];
}
return value || match;
});
}
// Render with data
const emailData = {
user: { name: 'Alice', email: 'alice@example.com' },
app: { name: 'MyApp', url: 'https://myapp.com' }
};
const renderedEmail = renderTemplate(emailTemplate, emailData);