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 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!
Hello World!
#include <stdio.h> int main(void) { printf("hello, world\n"); }
#include int main(void)
{
printf("hello, world\n");
}console.log "Hello, World!"
console.log "Hello, World!"
(println "Hello world!")
(println "Hello world!")
#include <iostream> int main() { std::cout << "Hello, world!\n"; return 0; }
#include int main()
{
std::cout << "Hello, world!\n";
return 0;
}console.log("Hello World!");
console.log("Hello World!");print("Hello World")
print("Hello World")cat("Hello world\n")
cat("Hello world\n")println("Hello, world!")
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)
Image
Use this widget to upload an image.
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. Smart Fit basically takes the original size of your image and scales it to the proper proportional size for your docs.
Image uploads are limited to 10mb.
Embed
This widget is a simple way to embed content from other sites, all we need is the URL.
Embedding videos with custom HTML/CSS
If the embed widget doesn't work for your URL, use the HTML/CSS widget instead.
Since the HTML/CSS widget strips JS, if you require external JS to embed your video, navigate to Documentation > Appearance > Custom Include Tags and insert JS into the head HTML section under a <script> tag and keep the HTML and CSS in the editor widget. The JS would apply to every page in your docs so you'd only need to enter the script tag once. However, you need to have at least the White Label tier to access the custom include tags feature!
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
It works great for iframes, like a Google Maps embed!