pxt-core/docfiles/macros.html

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

<aside id=button class=box>
    <a class="ui primary button docbutton" href="@ARGS@">@BODY@</a>
</aside>

<aside id=vimeo>
    <div class="ui two column stackable grid container">
        <div class="column">
            <div class="ui embed mdvid" data-source="vimeo" data-id="@ARGS@"
                data-placeholder="/thumbnail/1024/vimeo/@ARGS@" data-icon="video play">
            </div>
        </div>
    </div>
</aside>

<aside id=youtube>
    <div class="ui grid">
        <div class="ten wide column">
            <div class="ui embed mdvid" data-source="youtube" data-id="@ARGS@"
                data-placeholder="https://img.youtube.com/vi/@ARGS@/0.jpg">
            </div>
        </div>
    </div>
</aside>

<aside id=section>
    <!-- section @ARGS@ -->
</aside>

<aside id=hide class=box>
    <div style='display:none'>
        @BODY@
    </div>
</aside>

<aside id=avatar class=box>
    <div class='avatar @ARGS@'>
        <div class='avatar-image'></div>
        <div class='ui compact message'>
            @BODY@
        </div>
    </div>
</aside>

<aside id=hint class=box>
    <div class="ui info message">
        <div class="content">
            @BODY@
        </div>
    </div>
</aside>

<aside id=codecard class=box>
    <pre><code class="lang-codecard">@BODY@</code></pre>
</aside>

<aside id=tutorialhint class=box>
    <div class="ui hint message">
        <div class="content">
            @BODY@
        </div>
    </div>
</aside>

<aside id=reminder class=box>
    <div class="ui warning message">
        <div class="content">
            @BODY@
        </div>
    </div>
</aside>

<aside id=alert class=box>
    <div class="ui negative message">
        <div class="content">
            @BODY@
        </div>
    </div>
</aside>

<aside id=tip class=box>
    <div class="ui positive message">
        <div class="content">
            @BODY@
        </div>
    </div>
</aside>

<!-- wrapped around ordinary content -->
<aside id=main-container class=box>
    <div class="ui text">
        @BODY@
    </div>
</aside>

<!-- used for 'column' box - they are collected and wrapped in 'column-container' -->
<aside id=column class=aside>
    <div class='column'>
        @BODY@
    </div>
</aside>
<aside id=column-container class=box>
    <div class="ui three column stackable grid text">
        @BODY@
    </div>
</aside>


<!-- Menu on the top of the page -->
<aside id=item class=menu>
    <a class="item" href="@LINK@">@NAME@</a>
</aside>

<aside id=divider class=menu>
    <div class="divider"></div>
</aside>

<!-- TOC in the sidebar -->
<aside id=item class=toc>
    <a class="item @ACTIVE@" href="@LINK@" role="menuitem">@NAME@</a>
</aside>

<aside id=divider class=toc>
    <div class="divider"></div>
</aside>

<aside id=toc-dropdown class=toc>
    <div class="ui @tocclass@ accordion item visible" role="tree" title="@TITLE@">
        <div class="@ACTIVE@ title">
            <i class="right chevron icon"></i>
            <a class="header" role="treeitem" aria-expanded="@EXPANDED@" href="@LINK@">@NAME@</a>
        </div>
        <div class="@ACTIVE@ content">
            @ITEMS@
        </div>
    </div>
</aside>

<aside id=toc-dropdown-noLink class=toc>
    <div class="ui @tocclass@ accordion item visible" role="tree" title="@TITLE@">
        <div class="@ACTIVE@ title">
            <i class="right chevron icon"></i>
            <a class="header" role="treeitem" aria-expanded="@EXPANDED@">@NAME@</a>
        </div>
        <div class="@ACTIVE@ content">
            @ITEMS@
        </div>
    </div>
</aside>

<aside id=toc-dropdown-noHeading class=toc>
</aside>

<!-- TODO: duplicates of above for compatability with docsrender.ts;
    remove with pxtlib/docsrender.ts TOC TODOs after cloud bump. -->
<aside id=top-dropdown class=toc>
    <div class="ui @tocclass@ accordion item visible" role="tree" title="@TITLE@">
        <div class="@ACTIVE@ title">
            <i class="right chevron icon"></i>
            <a class="header" role="treeitem" aria-expanded="@EXPANDED@" href="@LINK@">@NAME@</a>
        </div>
        <div class="@ACTIVE@ content">
            @ITEMS@
        </div>
    </div>
</aside>

<aside id=top-dropdown-noHeading class=toc>
</aside>

<aside id=inner-dropdown class=toc>
    <div class="ui @tocclass@ accordion item visible" role="tree" title="@TITLE@">
        <div class="@ACTIVE@ title">
            <i class="right chevron icon"></i>
            <a class="header" role="treeitem" aria-expanded="@EXPANDED@" href="@LINK@">@NAME@</a>
        </div>
        <div class="@ACTIVE@ content">
            @ITEMS@
        </div>
    </div>
</aside>

<aside id=nested-dropdown class=toc>
    <div class="ui @tocclass@ accordion item visible" role="tree" title="@TITLE@">
        <div class="@ACTIVE@ title">
            <i class="right chevron icon"></i>
            <a class="header" role="treeitem" aria-expanded="@EXPANDED@" href="@LINK@">@NAME@</a>
        </div>
        <div class="@ACTIVE@ content">
            @ITEMS@
        </div>
    </div>
</aside>