<html data-dark-mode="false" data-code-theme="light">

<script src="/markbind/js/theme-manager.js"></script>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="generator" content="MarkBind 7.2.1">

<meta name="viewport" content="width=device-width, initial-scale=1"><title>MarkBind - Showcase</title> <link rel="stylesheet" href="/markbind/css/bootstrap.min.css"> <link rel="stylesheet" href="/markbind/fontawesome/css/all.min.css">

<link rel="stylesheet" id="markbind-highlight-light" href="/markbind/css/codeblock-light.min.css">

<link rel="stylesheet" id="markbind-highlight-dark" href="/markbind/css/codeblock-dark.min.css">

<script src="/markbind/js/code-theme.js"></script><link rel="stylesheet" href="/markbind/css/markbind.min.css"><link rel="stylesheet" href="/plugins/codeBlockWrapButtons/codeBlockButtons.css"><link rel="stylesheet" href="/plugins/web3Form/web-3-form.css"><link rel="stylesheet" href="/plugins/codeBlockCopyButtons/codeBlockButtons.css"><link rel="stylesheet" href="/plugins/dataTable/datatables.min.css"><link rel="stylesheet" href="/plugins/dataTable/datatables-additional.css"><link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css"><link rel="stylesheet" href="/plugins/markbind-plugin-tree/markbind-plugin-tree.css">

<link rel="stylesheet" href="/css/main.css">

<link rel="icon" href="/favicon.ico"></head>

const baseUrl = ''

<body

data-code-theme="light">

<div id="app"><!--[--><header sticky><div data-v-94b60ff6><nav class="navbar navbar-expand-md d-print-none navbar-dark bg-dark" data-v-94b60ff6><div class="container-fluid" data-v-94b60ff6><div class="navbar-left" data-v-94b60ff6><!--[--><a href="/index.html" title="Home" class="navbar-brand"><img src="/images/logo-darkbackground.svg" height="20"></a><!--]--></div><div class="navbar-default" data-v-94b60ff6><ul class="navbar-nav me-auto mt-2 mt-lg-0" data-v-94b60ff6><!--[--> <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li> <div tags="environment--ug environment--combined"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div> <li><a highlight-on="exact" href="/showcase.html" class="nav-link">SHOWCASE</a></li> <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li> <li><a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><span><span aria-hidden="true" class="fab fa-github"></span></span></a></li> <!--]--></ul></div><div class="navbar-right" data-v-94b60ff6><ul class="navbar-nav" data-v-94b60ff6><!--[--><li><form class="navbar-form"><div style="position:relative;" class="dropdown" data-v-103d5c4e><!--[--><input value="" data-bs-toggle="dropdown" type="text" class="form-control" placeholder="Search" autocomplete="off" data-v-103d5c4e><div class="form-control placeholder-div-hidden" data-v-103d5c4e>Search</div><!--]--><ul class="dropdown-menu search-dropdown-menu dropdown-menu-hidden dropdown-menu-end" data-v-103d5c4e><!--[--><!--]--></ul></div></form></li><!--]--></ul><!----></div></div></nav><div style="display:none;" class="lower-navbar-container" data-v-94b60ff6><!--[--><!----><!----><!--]--></div></div></header> <div id="flex-body"><div id="content-wrapper"><h1 id="examples-of-markbind-websites">Examples of MarkBind Websites<a class="fa fa-anchor" href="#examples-of-markbind-websites" onclick="event.stopPropagation()"></a></h1> <h2 id="course-websites">Course Websites<a class="fa fa-anchor" href="#course-websites" onclick="event.stopPropagation()"></a></h2> <ul><li><a href="https://www.comp.nus.edu.sg/~cs2103"><strong>CS2103/T Software Engineering</strong></a></li> <li><a href="https://www.comp.nus.edu.sg/~cs2113"><strong>CS2113/T Software Engineering and OOP</strong></a></li> <li><a href="https://nus-cs3281.github.io/website/"><strong>CS3281&amp;2 Thematic Systems Project</strong></a></li> <li><a href="https://nus-tic2002-2019.github.io/website/"><strong>TIC2002 Introduction to Software Engineering</strong></a></li> <li><a href="https://nus-te3201.github.io/2020/"><strong>TE3201 Software Engineering</strong></a></li> <li><a href="https://nus-cs3203.github.io/course-website/"><strong>CS3203 Software Engineering Project</strong></a></li></ul> <h2 id="online-books">Online Books<a class="fa fa-anchor" href="#online-books" onclick="event.stopPropagation()"></a></h2> <ul><li><a href="https://se-education.org/se-book/"><strong>Software Engineering for Self-Directed Learners</strong></a></li> <li><a href="https://se-education.org/learningresources/"><strong>A Student&#39;s Guide to Software Engineering Tools &amp; Techniques</strong></a></li></ul> <h2 id="product-project-websites">Product/Project Websites<a class="fa fa-anchor" href="#product-project-websites" onclick="event.stopPropagation()"></a></h2> <ul><li>This website <span class="dimmed">(i.e., MarkBind website)</span></li> <li><a href="https://reposense.org"><strong>reposense.org</strong></a></li> <li><a href="https://se-education.org"><strong>se-education.org</strong></a></li> <li><a href="https://damithc.github.io/ab3-markbind/index.html"><strong>AddressBook Level-3</strong></a></li></ul></div> <div class="scroll-top-button fa-lg d-print-none" style="display:none;bottom:2%;right:2%;position:fixed;" aria-hidden="true"><!--[--><i class="fas fa-arrow-circle-up"></i><!--]--></div></div> <div><footer><div class="text-center"><small>[Generated by <a href="https://markbind.org/">MarkBind 7.2.1</a> on Thu, 27 Aug 2026, 7:09:07 UTC]</small><br> <small>This site is powered by <a href="https://www.netlify.com/">Netlify</a>.</small></div></footer></div><!--]--></div>

</body><script src="/markbind/js/bootstrap-utility.min.js"></script>

<script src="/markbind/js/polyfill.min.js"></script>

<script src="/markbind/js/vue.global.prod.min.js"></script>

<script src="/markbind/js/markbind.min.js"></script>

<script src="showcase.page-vue-render.js"></script>

MarkBind.setupWithSearch()

<script>

function toggleCodeBlockWrap(element) {

const pre = element.parentElement.parentElement;

const tooltipText = element.querySelector(".tooltiptext");

const classList = pre.querySelector('code').classList;

if (classList.contains('wrap')) {

classList.remove('wrap');

tooltipText.innerText = `Wrap Text`;

} else {

classList.add('wrap')

tooltipText.innerText = `Unwrap Text`;

}

}

</script>

<script>

function submitForm(element) {

event.preventDefault();

const formData = new FormData(element);

const formProps = Object.fromEntries(formData);

const json = JSON.stringify(formProps);

const submitButton = element.querySelector('button[type="submit"]');

const submitButtonText = submitButton.innerText;

submitButton.innerText = 'Please wait...'

fetch('https://api.web3forms.com/submit', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Accept': 'application/json'

},

body: json,

})

.then(async (response) => {

if (response.status == 200) {

alert('Form submitted! Thank you for your response');

} else {

alert('Error submitting form! Please try again later.');

}

})

.catch(error => {

alert('Error submitting form! Please try again later.');

})

.finally(() => {

submitButton.innerText = submitButtonText;

})

}

</script>

<script>

function copyCodeBlock(element) {

const pre = element.parentElement.parentElement;

const codeElement = pre.querySelector('code');

const copyButtonBody = element.querySelector('.function-btn-body');

const tooltipText = element.querySelector(".tooltiptext");

// create dummy text element to select() the text field

const textElement = document.createElement('textarea');

textElement.value = codeElement.textContent;

document.body.appendChild(textElement);

textElement.select();

document.execCommand('copy');

document.body.removeChild(textElement);

copyButtonBody.innerHTML = `

console.log("Running tooltip");

tooltipText.innerText = `Copied!`;

setTimeout(() => {

copyButtonBody.innerHTML = `

tooltipText.innerText = `Copy`;

}, 3000);

}

</script>

<script src="/plugins/dataTable/datatables.min.js"></script>

<script>

function getTableOptions(el) {

const options = {};

if ($(el).hasClass('sortable-table')) {

options.searching = false;

options.paging = false;

options.info = false;

} else if ($(el).hasClass('searchable-table')) {

options.ordering = false;

options.paging = false;

options.info = false;

options.dom = '<"row"<"col-sm-12"f>>' + '<"row"<"col-sm-12"t>>';

} else if ($(el).hasClass('sortable-searchable-table')) {

options.paging = false;

options.info = false;

options.dom = '<"row"<"col-sm-12"f>>' + '<"row"<"col-sm-12"t>>';

}

return options;

}

function initializeTables(tables) {

if (!tables || tables.length === 0) return;

tables.forEach(table => {

const options = getTableOptions(table);

$(table).DataTable(options);

$(table).addClass('dt-processed');

});

}

function setupTableObserver() {

const observer = new MutationObserver((mutations) => {

let newTables = [];

mutations.forEach(mutation => {

if (mutation.addedNodes.length) {

mutation.addedNodes.forEach(node => {

if (node.nodeType === 1 && node.tagName === 'TABLE' &&

!$(node).hasClass('dt-processed') &&

($(node).hasClass('sortable-table') ||

$(node).hasClass('searchable-table') ||

$(node).hasClass('sortable-searchable-table'))) {

newTables.push(node);

}

if (node.nodeType === 1 && node.querySelectorAll) {

const tablesInNode = node.querySelectorAll(

'table.sortable-table:not(.dt-processed), ' +

'table.searchable-table:not(.dt-processed), ' +

'table.sortable-searchable-table:not(.dt-processed)');

if (tablesInNode.length) {

newTables = [...newTables, ...tablesInNode];

}

}

});

}

});

if (newTables.length > 0) {

initializeTables(newTables);

}

});

// Start observing the entire document for changes

observer.observe(document.body, {

childList: true,

subtree: true

});

return observer;

}

document.addEventListener('DOMContentLoaded', function() {

// Process any existing tables

const existingTables = document.querySelectorAll(

'table.sortable-table:not(.dt-processed), ' +

'table.searchable-table:not(.dt-processed), ' +

'table.sortable-searchable-table:not(.dt-processed)'

);

if (existingTables.length > 0) {

initializeTables(existingTables);

}

setupTableObserver();

});

</script>

<script type="module">

window.mermaidPromise = null;

const loadMermaid = () => {

if (window.mermaidPromise === null) {

window.mermaidPromise = import('https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs')

.then(({ default: mermaid }) => {

mermaid.initialize({

startOnLoad: false,

});

console.log('Mermaid loaded successfully');

return mermaid;

})

.catch((error) => {

console.error('Mermaid failed to load:', error);

window.mermaidPromise = false;

return null;

});

}

return window.mermaidPromise;

};

const renderMermaidDiagrams = (elements) => {

if (!elements || elements.length === 0) {

return Promise.resolve();

}

return loadMermaid().then(mermaid => {

if (!mermaid) return;

return mermaid.run({ nodes: Array.from(elements) })

.catch(err => console.error('Error rendering mermaid diagrams:', err));

});

};

const setupMermaidObserver = () => {

const observer = new MutationObserver((mutations) => {

let newMermaidElements = [];

mutations.forEach(mutation => {

if (mutation.addedNodes.length) {

mutation.addedNodes.forEach(node => {

if (node.nodeType === 1 && node.classList &&

node.classList.contains('mermaid')) {

newMermaidElements.push(node);

}

if (node.nodeType === 1 && node.querySelectorAll) {

const mermaidInNode = node.querySelectorAll('.mermaid');

if (mermaidInNode.length) {

newMermaidElements = [...newMermaidElements, ...mermaidInNode];

}

}

});

}

});

if (newMermaidElements.length > 0) {

renderMermaidDiagrams(newMermaidElements);

}

});

observer.observe(document.body, {

childList: true,

subtree: true

});

return observer;

};

// Initialize on DOM content loaded

document.addEventListener('DOMContentLoaded', () => {

const existingDiagrams = document.querySelectorAll('.mermaid');

if (existingDiagrams.length > 0) {

renderMermaidDiagrams(existingDiagrams);

}

setupMermaidObserver();

});

</script>