Get started, instantly

One script. One call. Interactive, highlighted code—no setup hassle.

Here’s the minimal HTML setup you can drop into any page. It just loads the stylesheet and the script, then runs auto-init so existing .PWAxcode blocks upgrade themselves.

Include the CSS (in <head>)
<link rel="stylesheet" href="/dist/pwaxcode.min.css"> <!-- Optional: icons for toolbar/footer controls --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer">

Include the JS (right before <body>)
<script defer src="/dist/pwaxcode.min.js"></script> <script> // Upgrade every .PWAxcode block found in the DOM PWAxcode.autoInit(); </script>

That’s it—no bundler required. You can add per-snippet options via data-* attributes, or switch to programmatic control later with new PWAxcode(el, {...}).

Test Code 

						        	// https://www.geeksforgeeks.org/javascript/how-to-build-notes-app-using-html-css-javascript/
const addBtn = document.querySelector("#addBtn");
const main = document.querySelector("#main");

// Click event listener
addBtn.addEventListener("click", function () {
    addNote();
});

// Save button function
const saveNotes = () => {

    // Select content textareas
    const notes = 
        document.querySelectorAll(".note .content"); 
        
    // Select title textareas
    const titles = 
        document.querySelectorAll(".note .title"); 

    const data = [];

    notes.forEach((note, index) => {
        const content = note.value;
        const title = titles[index].value;
        console.log(title);
        if (content.trim() !== "") {
            data.push({ title, content });
        }
    });

    const titlesData = 
        data.map((item) => item.title);
    console.log(titlesData);
    localStorage.setItem(
        "titles", JSON.stringify(titlesData));

    const contentData = 
        data.map((item) => item.content);
    localStorage.setItem(
        "notes", JSON.stringify(contentData));
};

// Addnote button function
const addNote = (text = "", title = "") => {
    const note = document.createElement("div");
    note.classList.add("note");
    note.innerHTML = `
    

         
         
         
          
    

    

        
    

    
    `;
    function handleTrashClick() {
        note.remove();
        saveNotes();
    }
    function handleSaveClick() {
        saveNotes();
    }
    const delBtn = note.querySelector(".trash");
    const saveButton = note.querySelector(".save");
    const textareas = note.querySelectorAll("textarea");

    delBtn.addEventListener("click", handleTrashClick);
    saveButton.addEventListener("click", handleSaveClick);
    main.appendChild(note);
    saveNotes();
};

// Loading all the notes those are saved in 
// the localstorage
function loadNotes() {

    const titlesData = 
        JSON.parse(localStorage.getItem("titles")) || [];
    const contentData = 
        JSON.parse(localStorage.getItem("notes")) || [];
        
    for (let i = 0; 
            i < Math.max(
                titlesData.length, contentData.length); i++) {
        addNote(contentData[i], titlesData[i]);
    }
}
loadNotes();

Drop the CSS/JS in your page and you’re done: call PWAxcode.autoInit() to upgrade all your snippets, or create a single instance with new PWAxcode(el, { bare:true, highlight:true }). No build step, no framework lock-in. Start simple and layer options later—theme, line numbers, ruler, search, and the Player—without changing your markup. Works out of the box for JS/HTML/CSS/JSON/SQL, and you can extend languages via the plugin API.

Auto-init (fastest)

// Hello world const greet = (n) => `Hi ${n}`; const n = 'World'; console.log(greet(n));

Your Code

Write your snippet exactly as plain text. Keep the indentation you want—PWAxcode will preserve spaces/tabs (you can enable dedent at init if needed).


						        	

								      

								      	

												// Hello world
												const greet = (n) => `Hi ${n}`;
												const n = 'World';
												console.log(greet(n));

Mark your snippets

Wrap each snippet in your usual code container and add the PWAxcode class. Put the raw code inside. Optionally set data-lang (js, html, css, json, sql). Per-snippet switches like data-line-numbers, data-wrap, data-theme and many more are supported.


						        	// Startup
						        	PWAxcode.autoInit();

Call auto-init

After DOM ready, run PWAxcode.autoInit() (optionally with a selector and default options). It upgrades every matching, not-yet-initialized block and respects per-snippet data-* overrides.

Per-snippet (fine-grained control)

// Hello world const greet = (n) => `Hi ${n}`; const n = 'World'; console.log(greet(n));

Your Code

Write your snippet exactly as plain text. Keep the indentation you want—PWAxcode will preserve spaces/tabs (you can enable dedent at init if needed).


						        	

											// Hello world
											const greet = (n) => `Hi ${n}`;
											const n = 'World';
											console.log(greet(n));

The mount DIV

Put the snippet inside a plain DIV—just the code, no headers/footers and no data attributes. The language is chosen via the lang option at initialization. Use any id/class you like; it’s only for selecting the element.


						        	rt=new PWAxcode(document.getElementById('init'), {
											  bare: true,
												lang: 'js',
												highlight: true
											});

Initialize

Initialize the instance in bare mode so nothing extra is rendered. The highlighter upgrades your div in place (syntax, optional line numbers, ruler, theme), without adding chrome or changing your layout.