Skip to main content

Editing Tips

Choosing an Editor

The default editor for this Bookstack wiki has been set to Markdown. If you prefer a more traditional WYSIWYG editor (What You See Is What You Get) similar to microsoft word then at then when editing a page select the "Editing Page" or "Draft Saved ..." button at the top center of the screen and select "Switch to WYSIWYG Editor".

Callouts:

Althoug similar, Bookstack does not use Github Flavoured Markdown (GFM) which might be what most users are used to. The admins of this bookstack have added custom callouts that match the look and style of GFM callouts.

<p class="callout note"> Github Style Note Callout</p>
<p class="callout tip"> Github Style Tip Callout</p>
<p class="callout important"> Github Style Important Callout</p>
<p class="callout warn"> Github Style Warning Callout</p>
<p class="callout caution"> Github Style Caution Callout</p>

Github Style Note Callout

Github Style Tip Callout

Github Style Important Callout

Github Style Warning Callout

Github Style Caution Callout

If these stop working, contact a Wiki administrator and ask them to look at the "Custom HTML Header" for the bookstack. You can also revert to the default callout styles provided by bookstack.

<p class="callout info">An info message</p>
<p class="callout success">A success message</p>
<p class="callout warning">A warning message</p>
<p class="callout danger">A danger message</p>

An info message

A success message

A warning message

A danger message

Callouts with Code:

Since bookstack forces you to use html tags to use custom callouts, placing code blocks within these callouts requires special care. The back ticks (`) or triple backtick (```) will not be recognized within the callout. To circumvent this use the <div> tag instead of <p> and <pre> and <code> tags around your code. You can use <!-- and --> to avoid a blank line when putting the first line of code on the line after the code tag. Eg.

<div class="callout important">
Important note with some code.
<div style="height: 0.5em;"></div> <!-- Insert a bit of whitespace -->
<pre><code class="language-python"><!-- Continue on next line
-->for i in range(2):
  print("hello")
</pre></code>
</div>
Important note with some code. 
for i in range(2):
  print("hello")
Back to top