pxt-core-own/docfiles/macros.html

Microsoft MakeCode, also known as Programming Experience Toolkit (PXT), provides Blocks / JavaScript 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>

<!-- 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>

<aside id=top-dropdown class=menu>
    <nav div class="ui simple dropdown item" title="@TITLE@">
        @NAME@
        <i class="dropdown icon"></i>
        <div class="menu">
            @ITEMS@
        </div>
    </nav>
</aside>

<aside id=inner-dropdown class=menu>
    <nav class="item" title="@TITLE@">
        <i class="dropdown icon"></i> @NAME@
        <div class="menu">
            @ITEMS@
        </div>
    </nav>
</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=top-dropdown class=toc>
    <div class="item" title="@TITLE@">
        <a class="header @ACTIVE@" href="@LINK@" role="menu">@NAME@</a>
        <div class="menu">
            @ITEMS@
        </div>
    </div>
</aside>

<aside id=top-dropdown-noheading class=toc>
    <div class="item" title="@TITLE@">
        <div class="menu">
            @ITEMS@
        </div>
    </div>
</aside>

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