Feather Wiki

A tiny tool for simple, self-contained wikis!

Learn /

Editing Pages

Feather Wiki has 2 different ways to edit the content of your pages: the HTML Rich Text editor (also called What-You-See-Is-What-You-Get or WYSIWYG) and the Markdown editor. This page will cover how to do things with each editor.

HTML Rich Text Editor #

Along the top is a toolbar with various common formatting options—hovering over each will display what they do. By default, content you type is surrounded by the HTML <p> tag, and each time you press Enter or Return on your keyboard it starts a new paragraph with that content starting a new <p> block. If you know what you're doing, you can click the "Show HTML" button below the editor to display and edit the HTML of the content you have entered in the editor and toggle it back to the editor when you are done!

There are 2 different types of links as far as Feather Wiki is concerned: internal and external links.

As the name implies, External links go to web pages outside of your Feather Wiki. You can insert external links into your page content using the 🔗 icon in the toolbar. This will either insert the link you specify in full where the editor's cursor is displayed, or it will make any highlighted text a clickable link to the URL you specified. External links are identified with a icon and will open in a new tab.

Internal links are links that go to other pages within your Feather Wiki. You can create an internal link by wrapping page title in two brackets [[like this]]. The text inside the brackets will be "slugified" as mentioned on the [[Create A Page]] page and generate a link to that page. You can also manually specify a slug to link to with different text linking to it by putting the slug after a vertical bar [[like this|page_slug]]. (This method is necessary if you changed your page's slug manually to be different than the original "slugified" version of the title.)

If you create an internal link to a page that does not yet exist, it will be indicated as nonexistent by being colored red with a little exclamation point [[like this]]. But if you visit a nonexistent page, Feather Wiki will give you the opportunity to create that page, which can be useful for preparing pages you want to write later.

By default, adding headings to pages by using the "H" and "H2" buttons adds a link directly to that heading. If you want to link to a heading on any page with an internal link, find that heading's hash (the slugified text joined to the # in the link) and add that to the internal link [[like this#heading_hash]] or [[like this|page_slug#heading_hash]]. If you need to link to a heading on the current page, just use the current page's slug in the same way. For example, if I wanted to link to the "Markdown Editor" heading further down this page, I would write [[Markdown Editor section|editing_pages#markdown_editor]].

Adding Images

Just like with links, Feather Wiki separates images into two types: internal and external.

External images are stored elsewhere on the internet and are referenced by their URLs in your Feather Wiki. You can insert external images using the 🖼️ icon in the toolbar. When you specify an external image's URL, it will insert it into the editor where your cursor is, usually as a new paragraph. Using external images can help keep the file size of your Feather Wiki small, but it will require an internet connection to view the image when you load your Feather Wiki.

Internal images are files you upload from your computer that get stored directly inside of your Feather Wiki's HTML file. You can insert internal images using the 📸 icon in the toolbar. After warning that inserting a file will increase your wiki's file size, you can choose any image to insert, set the max width and height to scale the image to, and specify alt text for that image. Your image will be scaled down to the width and height in pixels that you specify, depending on whether the image is portrait or landscape. If your image is smaller than the dimensions you specify, it will not be scaled. If you upload an image and set the same dimensions, then it will not add it to the wiki again, but if you specify different max dimensions, then the image of that size will be added as a separate image to the wiki.

If you have already added internal images to your Feather Wiki, you can use the 📎 icon in the toolbar to insert one of those existing images into your page. Click the "View" button to view the full size image in a new tab or the "Insert" button to insert it into your page. Feather Wiki handles internal images in a way that saves file size, so if you add multiples of the same image, your Feather Wiki will only grow in file size by the size of the single image you inserted instead of duplicating the image data stored inside your HTML file.

Markdown Editor

If you don't already know, Markdown is a way to write text with a markup that's not only easy to write and that easily renders to HTML, but that can also be read without rendering it to HTML while still being able to understand how the text should be formatted. The Markdown editor in Feather Wiki is a simple text area with just 3 buttons below it: "Preview," "Insert Image from File," and "Add Existing Image." The "Preview" button expands a panel that shows how your page content will be rendered in real time, and the other two buttons behave exactly the same as the 📸 and 📎 icons outlined above.

Other than that, the Markdown interpreter that Feather Wiki uses (a heavily customized md.js, if you're interested) behaves as you might expect with only a couple of quirks. View the [[Markdown Support]] page for an outline of all of the specific Markdown features available in Feather Wiki.

Links & Images

Internal links are handled the same as mentioned above, i.e. [[like this]] or [[like this|page_slug]], but external links are handled as normal Markdown links, i.e. [link text](http://the.url/to/visit).

Images are also handled the same way, but the alt text is not inserted into the Markdown text by default and the image is represented by a shortened hash of your image's data that looks like ![](img:186914097:img). When you save your page, however, the image's alt text will be automatically rendered when the image is displayed. Leave the alt text area in the Markdown text empty when using internal images or else it may cause rendering issues.

Toggling to HTML

If you toggle from Markdown to the Editor, Feather Wiki will ask if you want to convert your Markdown to HTML. Clicking "Ok" will convert it, and clicking "Cancel" will not convert the Markdown but still change to the HTML editor. Toggling back to Markdown from HTML will only insert the HTML source into the Markdown field—the HTML will not be rendered into Markdown!

There is an extension available that enables you to [[toggle from HTML to Markdown|extensions_html_to_markdown]], but it requires extra code from an external CDN and must be used with an internet connection.

Escaped Text

As of version 1.7.0, Feather Wiki includes the ability to prevent any text from being parsed by the link generator and the Markdown parser. By wrapping the text you don't want parsed in a <nowiki> tag, you can prevent Feather Wiki from parsing that text. This is useful if, for example, you want to do what I did previously in the page and show how to write an internal link without having it actually become an internal link, i.e. <nowiki>[[like this|page_slug]]</nowiki>!

This can be done in the Markdown editor directly from the content text area (because Markdown does not alter HTML), but using it in the HTML Rich Text editor requires using the "Show HTML" button and adding the <nowiki> HTML directly. When using the HTML Rich Text editor after adding the tag to your text, it will be highlighted in light gray to indicate that it is nowiki-ed and the contents will not be parsed.