ReadMe

ReadMe Documentation

Welcome to the ReadMe Documentation, where you'll find comprehensive guides and community support to help you start working with ReadMe as quickly as possible!

Get Started

ReadMe has seven drag-and-drop widgets to enhance your pages beyond markdown basics.

Header

The header widget will create an H1 header for you. The results is equivalent to a single hash '#' in markdown. It simply looks a little nicer in the editor.

The difference is only in the editor

The difference is only in the editor

The result is the same

The result is the same

Code Sample

The code sample widget allows you to write styled code samples with tabs for different languages. Try clicking on each one!

Hello World!
#include <stdio.h>

int main(void)
{
    printf("hello, world\n");
}
console.log "Hello, World!"
(println "Hello world!")
#include <iostream>

int main()
{
    std::cout << "Hello, world!\n";
    return 0;
}
console.log("Hello World!");
print("Hello World")
cat("Hello world\n")
println("Hello, world!")

In addition to plain text, the supported code formats are:

A-H
J-P
R-Y

ASP
C
CoffeeScript
Clojure
C++
C#
CSS
cURL
Cypher
D
Erlang
Go
Groovy
Handlebars
HAML
Haxe
HTML
HTTP

Java
JavaScript
Jinja2
JSON
Julia
Kotlin
LESS
Liquid
Lua
Markdown
MySQL
Objective-C
Perl
PHP
Postgres
Python

R
Ruby
Rust
SASS
Scala
SCSS
Shell
Smarty
SQL
Stylus
Swift
TOML
Twig
XML
YAML

The Code Sample widget also allows you to

  • Rename any tab
  • Import Github Gists

Callout

There a four different colors for callouts

Blue

Clarifying information. Not good nor bad. But important.

Yellow

Warning. Keep this in mind as you attempt this.

Red

Caution! This could go really wrong if you don’t watch out for this.

Green

Great news for you! Something our product does really well.

Table

Tables look like this when published:

Column
Column 2
Column 3
Column 4
Column 5

Tables

are

so

hard

to

do

in

Markdown

aren't

they?

They look like this in the editor:

Change count to add/delete rows (or columns)

Change count to add/delete rows (or columns)

Image

Use this widget to upload an image.

This is Owlbert as a handyman!

This is Owlbert as a handyman!

The magic stick icon in the editor lets you choose how to scale it.

This image is on "Smart Fit" sizing with the "Image Border" option checked.

This image is on "Smart Fit" sizing with the "Image Border" option checked.

Embed

This widget is a simple way to embed content from other sites, all we need is the URL.

If the embed widget doesn't work for your URL, use the HTML/CSS widget instead.

The embed widget rendered this 42s video of ReadMe Build from its YouTube URL:
https://www.youtube.com/watch?v=t-4Erj3rE18

HTML/CSS

The custom HTML/CSS widget will strip any JavaScript and scope the CSS

This is how the widget looks in the editor

This is how the widget looks in the editor

It works great for iframes, like a Google Maps embed!


Widgets