$ var pageTitle="Marko Templating Engine";
$ var currentPage='home';

<!DOCTYPE html>
html lang="en"
    head
        title -- ${pageTitle}
    body
        h1 -- ${pageTitle}

        p
            ---
            Marko is a <i>fast</i> and lightweight templating engine that
            compiles templates to CommonJS modules and supports streaming,
            async rendering and custom tags. It supports both a familiar
            HTML syntax and a concise, indentation-based syntax.
            ---

        ul.features
            li for(feature in ['async', 'streaming', 'custom-tags', 'readable', 'modules'])
                -- ${feature}

        ul if(input.colors && input.colors.length)
            li for(color in input.colors) -- ${color}
        div else
            -- No colors!

        tabs
            tabs:tab title="Tab 1"
                -- Body content for Tab 1
            tabs:tab title="Tab 2"
                -- Body content for Tab 2

        <script type='text/javascript'>
        if (foo) {
            alert('Marko is awesome!');
        }
        </script>

        <macro navLink(id, href, title)>
            <li>
                <a.nav-link class=(id === currentPage && 'active') href=href>
                    ${title}
                </a>
            </li>
        </macro>

        <ul>
            <navLink('home', '/', 'Home')/>
            <navLink('docs', '/docs', 'Docs')/>
            <navLink('blog', '/blog', 'Blog')/>
        </ul>