# Custom Components Library

This page is a library of custom component classes. They can be rendered by pressing the 'Preview Page' button created by the `id-hackmd-enhance` chrome plugin.

## Bootstrap components
All components valid in Bootstrap 3.7. See the following links for a list of components:
- https://getbootstrap.com/docs/3.3/components/
- https://getbootstrap.com/docs/3.3/javascript/

Please also keep in mind the following caveats:
- The `button` tag is not rendered by HackMD, use the `a` tag instead.
- There may be styling issues (such as incorrect colors or spacing issues) in the HackMD live preview. Additionally, interactive components may not work. Use the 'Preview Page' button to see what they will actually look like when published.

## `panel-collapse`

When added to a bootstrap `panel` class with the following structure, `panel-collapse` will make that panel collapsable. It can be set to begin collapsed by setting `data-collapsed="true"`.

<div class="panel panel-info panel-collapse">
<div class="panel-heading">
My heading
</div>
<div class="panel-body" data-markdown="1">
*My body*
</div>
</div>

<div class="card">
<div class="card-header">

Featured

</div>
<div class="card-body">

Some quick example text to build on the card title and make up the bulk of the card's content.

</div>
</div>

## `code-line-highlights`

A `pre` tag with the code-line-highlights will syntax render its contents the start line and highlighted lines can be specified using `data-start` and `data-highlight`. `data-highlight` accepts a semi-colon deliniated list of individual lines or ranges.

<pre class="code-line-highlights" data-start="1" data-highlight="3;9-10">
local Players = game:GetService("Players")

-- Highlight this comment

Players.PlayerAdded:Connect(function(newPlayer)
workspace.Players.Value += 1 -- Using luau syntax
end)

-- Highlight this comment
-- And this one
</pre>

If highlighted lines are not required, it is simpler to use the (` ```lua `) syntax, which still permits line numbers (see below)

print("Hello world")

## `api-link`

When applied to an `a` tag, will automatically convert the tags contents into a link to a developer hub API page. If alternative display text is required, the `data-name` property can be used to overwrite.

<a class="api-link">Workspace.CurrentCamera</a>
<a class="api-link" data-name="Workspace.CurrentCamera">CurrentCamera</a>