Working with LibreHealth Wiki Documents

From LibreHealth EHR Wiki
Jump to: navigation, search

Working with LibreHealth Wiki Documents


LibreHealth EHR is a robust electronic health records system. As such, it requires a strong library of guides to help the user enjoy a positive experience. Our library is the LibreHealth Wiki.

This document will strive to help you understand the different markdown codes and formats that you will encounter when you create your documents in our library.

Toni (KoniKodes) Shortsleeve, LibreHealth / Outreachy EHR Documentation Mentor, May 2020


In order to log in, you will need to be granted access from our lead mentor, Harley Tuck.

When you first log in, you will see the Main Page.


Do Not Edit This Page – unless you have been given express permission

Type in the name of the document you want to create into the Search Bar.


If this is a new document, you will see this:


Don’t panic. Clink on the red link to create a new page.

And now the fun begins…

Creating the Document


The Coding Bar

The Coding Bar can be very helpful when you first begin using wiki.

Choosing the B button makes the text bold. This is done with 3 ticks on each side of the text.


Choosing the I button makes the text italic. This is done with 2 ticks on each side of the text.


Choosing the Ab button creates a link to another section of the document. This is done with two square brackets opening and closing the link name. Then create a span tag with an # id name.


For instance, to link from this page to the Summary section, you would code:


If this was coded in HTML, it would look like this:

<a href="#summary">Summary</a>

Then before the Summary section, you would code:

<span id="summary">

Choosing the Globe creates a link outside of the document.


Remember to leave a space between the url and the name.

Choosing the A button will show how to make a Level 2 heading.


Heading structures use the equal sign on each side of the text. The number of equal signs reflect the header level.

In this example, there is a space between each = to show the difference. However, in the actual document – there should be no spaces.

= Heading 1 (or Document Title) =

= = Heading 2 (for Introduction, Procedure and Summary) = =

= = = Heading 3 (for each main sub-section of Heading 2) = = =

= = = = Heading 4 = = = =

= = = = Heading 5 = = = = =

= = = = = = Heading 6 = = = = = =

There must be the same number of equal signs on each side of the heading.

You will find this Heading Structure shows up automatically in the Contents section of the Document. It will help you to see if the structure is correct, or needs to be fixed.


Choosing the Picture creates a link to an image file.


Wiki keeps track of everything that has been uploaded, so make certain that code is unique.

The best way to do this is to call the file by Author name – section – image number.

For instance, this image is named: [[File:Koni-coding-6.png]]

Also notice the image type.

A jpeg file will not be accepted into a png tag.

Choosing the Trumpet creates a link to an audio file.


Choosing the Crossed Out W removes the wiki formats.


Choosing the Lines places a horizontal line.


It has a good suggestion to use sparingly. It would better to use the header or text emphasis options.

Formatting Lists


When you copy a numbered list into a wiki document, it doesn’t always carry over properly.

This is especially true if there images between the numbers.

For example, in the original Word document it looks this: 1. Type in the information 2. Choose the SAVE button 3. Approve the changes

So when you copy it you expect it to fall into place:


And while it looks great in the input box, the preview shows us this:


Sometimes it also looks like this:


The best way to keep it consistent is to always have two spaces between the number and text, and to Enter/Return after each line.


As with numbered lists, when you copy a bulleted list into a wiki document, it doesn’t always carry over properly.

For example in the original Word document, it looks this:

• Type in the information

• Choose the SAVE button

• Approve the changes

However, when you direct copy it:


It looks like this:


It also is the wrong code. An asterisk is actually used to create a beautiful bullet.


You can also create a sub-bullet with two asterisks.


Highlighting Text

Showcasing sections of text can be helpful when you need to show specific segments, such as an HTML tag or CSS Codes.

You can do this by indenting a space before typing:


Unfortunately, the highlight box carries all across the screen and can be seen as ugly. So please use this wisely.

A better way may be to code a block quote around specific text:



Images must be uploaded to wiki before they can be added to the document.

This file has not been uploaded yet.


This is the message to let you know that.


Click on the file name to open the Upload File page.


You will want to click on the Choose File Button to open the image folder on your computer


Check that you actually chose the image file that matches the one named in the document


Click on the Upload file button at the bottom of the page


You will be taken to the Image Confirmation page where you can review the information.

Check to make sure it is the image you want (1)

The File History shows when it was uploaded and file information (2)

File Usage has the name of the document the image will load to (3). Click on the document name to return to the page.


This will take you back to the Document with the image now loaded.


Image Sizing

The images should be no more than 600px wide. The height of the image is not important, as long as it is scaled to the width.

If the image is larger than 600px, it is too difficult to read on many devices. It also takes up too much space and can make the wiki slow if there are too many images of that size.

And, it can make the document seem inconsistent if you have too much size difference between the images.

The image type should be either .jpg or .png and the image should be formatted for web at 72 dpi.

This can be difficult to accomplish if you are trying to capture a full page screen shot.

But there are a few things that you can do:

1. Lower the screen size to 90% or whatever it may take to get the entire page in one image.

  • You can also enlarge your screen size to 110-125% if it is needed for smaller images

2. Capture it at 150 or 300 dpi and then resize it to 600px wide.

3. Save for Web.

I use Snag-it to capture and resize, then copy to Photoshop and Save for Web.

If you are preparing the document for another author and the image width is 601px or more, contact that author and request a new image.

Image Spacing

You should have 1 line break before the image. This prevents the image from crowding the previous text, but keeps the visual flow smooth.

You should have 2 line breaks after the image. This allows the image to breathe before moving forward.


This keeps the spacing consistent and offers a clean feel throughout the document.

Upload Errors

At some point in time, something will probably go wrong when you upload your images.

We’ll discuss the most popular errors and how to fix them.

This warning just needs for you to actually choose the image before clicking the Upload File button:


This message shows that we are trying to upload a file that has already been uploaded:


In this case, we tried to create image 5, but uploaded image 2.

It was good that this was caught before we saved the document.

We are given 3 choices to handle the errors.

For this error, we would want to choose Cancel upload and return to the upload form.


This warning will occur if you try to replace an image with a newer version


Notice both file names are the same. But if you made a change in the image – such as adding a blue rectangle, then you want to replace what is currently in the document.

We would want to choose Ignore warning and save file anyway.

Naming Issues

This one may not show up until after you have saved the document.


Another file of the generic name was already uploaded


Image Note

Upload your images for each section before creating the next section.

In this image section alone, there are 15 images. Even with strict naming conventions in place, it is difficult to just go through the whole document to add the images.

Editing the Document

You can choose to edit the entire document, or only specific sections


I prefer to edit each section at a time, since this lets me focus on the current content.

I also prefer to use the edit source option with the Code Bar.


The edit option uses the Visual edit method if that is your preference.


I have been sharing the Edit source method in this document. But whichever edit option you use, I think you find the concepts remain the same.

You can quickly choose the section to edit from the Contents.


This is especially helpful if you have a large document, and don't want to scroll down the page.

After Edits

At the bottom of input screen are choices of action .


The Save changes button will save your edits and return to the previous page, showing the changes that were saved.

The Show preview button will show what the page will look like if it is saved. However, you will need to return to the Editing section to save your changes.

The Show changes button will show the history of the recent revisions.

The Cancel link will return to the previous page without saving.

The Editing help link will open and new window and offer information on editing with Wikipedia. Notice that there may be a few differences between editing with LibreHealth Wiki and the Wikipedia.


We have walked through the steps to create a new document for LibreHealth EHR on the wiki.

We have also reviewed how to work with the Coding Bar, and edit text, lists and images.

We hope this has been helpful in creating and editing new documents.

If you still have questions, feel free to ask the LibreHealth community on the LibreHealth Forums.