Building documentation isn't fun. Well, not usually.
We're here to help. You can now make beautiful documentation by simply pushing to a Git branch.
Create a new branch,
sb-documentation, and check it out locally using the
git checkout -b sb-documentation
Markdown is an easy way to write HTML. Create a new file
test.md in the new branch. (.md stands for Markdown)
Now open your file and add this content:
# My Document Title This is a markdown document! Here is a bulleted list: * Item 1 * Item 2 ## A Second-Level Heading This is another heading! ![Heres an Image](https://squarebit.io/images/page/home/squarebot-blue.png) Here is a [link](https://squarebit.io).
You did it! Now commit and push your code, then visit your product page.
You should see something like this:
You can also use basic HTML if you prefer it.
Let's take a look at something called YAML - "YAML Ain't Markup Language." It's an easy way to set metadata for the document you created.
Here's a look at setting some options:
--- title: API Request Cheat Sheet permalink: a-different-permalink categories: - Getting Started --- # My Document Title This is a markdown document!
All YAML blocks are denoted by the three dashes at the head of your document
see some options available for metadata:
If not set, the title is generated from your file name (
It's recommended you set the title yourself for readability.
If not set, the permalink is generated from your file name.
Set this to make a shorter URL, which is handy for when you have long titles.
Optionally set categories, which will group your docs together in the same category. You can set
multiple with more dashes if you'd like!
Accessing the category page in this example, you would go to:
Note that using categories will change the URL to your article. In this example, our new URL is now:
SquareBit.io documentation supports the concept of widgets. Currently we only have one, but are open to ideas on more!
Do you have a large bit of code that is making your docs messy? Show a button instead that opens it in a pretty dialog!
Here's how it's done:
<CodeDialog buttonText="See Response" title="Your Title Here!"> This is where your code goes. </CodeDialog>
|buttonText||The text that is displayed on the button which opens the dialog.|
|title||The dialog title.|
And that's it! Have suggestions? Drop us a line: Contact Page