Composing content in "markdown" format is a quick and accessible method of writing for the web. Markdown was invented by John Gruber to whom many thanks for his inspiration.
To get the information you need from this page you should read the markdown version within the Deskspace ecoWeb App, where this is displayed as a web page you will see the results but not how those results were achieved.
Rule 1
Every paragraph you wish to display must be commenced with at least a single hash character and space before your content commences.
Rule 2
You can use from one to six hash characters, each one denotes a style h1 through h6 and the theme you have selected will apply different styling to each paragraph depending on which h level you have used. To change the behaviour of that paragraph just change the number of hash characters.
Rule 3
You can use any punctuation characters you wish within the text you sculpt, except for the # hash character. You can use this character using the special character code 35.
Rule 4
You can include any normal html you wish, this will not be affected by the App processing the markdown, subject to Rule 1, but remember that this html may change how your page appears. For example inserting <> tags may change the appearance of the page.
Rule 5
You can include java scripts but we recommend that you plan to add them through your Settings which have specific fields which add code to the end of the header, the beginning of the body and the end of the body, the likely places for placing java script elements.
Rule 6
The App does something special to anything enclosed in double square brackets like these
Your pages will automatically adapt to the width of the screen on which they are displayed.
When the width of the display is more than the small/medium break specified on the Page Behaviour tab of your theme the paragraphs will split into left and right float mode which creates two columns.
With some simple logic in the layout of your textual content you can control which paragraphs float left or right.
Your content will flow down the page following these behavioural rules.
BASIC BEHAVIOUR
After a Heading level 1 or 2 followed by a blank line the next block of paragraphs will always float left.
A block of paragraphs which do not include a blank line will float either left or right based on the behaviour of the first paragraph in the block.
When a blank line occurs the next paragraph floats the other way.
SPECIAL CASES
An h1 should either be the first paragraph on the page or be preceeded by a blank line.
An h2 which is not preceeded by a blank line will follow the behaviour of the preceeding paragraph.
You can add an empty "ghost" paragraph to force the next para to go the other way and the ghost paragraph will not be displayed
A paragraph that is not commenced with at least one hash character remains in your input source markdown but is not included in the displayed page, so these could be used as draft elements or comments.
Styles of paragraph
You can use up to six different paragraph styles as follows:
h1 is the page heading title or a major page heading. If you include an image reference as specified below within the h1 paragraph that image will automatically form the background to the h1 text, so you may need to change your text color to obtain the correct contrast for readability. If you specify a background color that will be rendered over the background image. If you control the opacity of the background color by using the rgba() form of control you can place a soft filter over the background image;
h2 is a full width section heading or divider, however, if it is not preceeded by an empty line it will take on the width of the preceeding paragraph;
h3 is content with styling options such as colored backgrounds and borders - it will float left or right;
h4 is content with styling options such as colored backgrounds and borders - it will float left or right;
h5 is content with styling options such as colored backgrounds and borders - it will float left or right; and
h6 is content with styling options such as colored backgrounds and borders - it will float left or right.
Adding squares and bullets
Here are some useful character codes you can insert to display:
A modern hollow square which scales correctly everywhere - character code 9634.
● A nice bullet point - character code 9679.
You can of course use any Unicode Hex character values you desire.
Please see our page documenting some useful ones here.
Adding emphasise
Here is how you can add emphasise to specific sections of your content:
These emphasises can all be used in conjunction with each other and with the different heading levels so here is by way of example...
...this is a bold italic monospaced third level heading
italic requires use of a single asterix
bold requires use of a double asterix
code monospaced text requires the grave accent character found below tilde on a Mac UK Keyboard
whilst strikethrough requires use of a triple tilde
and to enter a full dash use three hyphens like this "the rain —; not the reign —; fell in Spain"
Inserting hypertext links
Open and closed double square brackets are used to mark a http link to another url with the text label for the link followed by the resource URL in either of the following formats
Where you need to include a hash in the markdown content, for example a section reference on an html page, a FileMaker WebDirect url or a character code, you need to use the character code 35 #. If you enter a normal hash character within a paragraph, as opposed to being one of the first group of characters to control the heading level, that paragraph will not display correctly within your web page.
For your convenience you can enter a double tilde &# where you want the hash and ampersand characters to display in your page.
Images, Googlemaps and Youtube videos
These will all automatically scale within your page and display as full width if within an h1 or h2 paragraph or the appropriate percentage partial width when in two column format within heading levels 3,4,5 & 6.
So if you want something to display large put it on the wide side of the page or small then put it on the narrower side.
Including images - use [Imge]
The four character label "Imge" identifies the type of link for processing by Deskspace Web Builder.
Just insert the image file name in the link as shown, this assumes that the image is located in the folder named "images" in the top level of your httpdocs home folder on your webserver. Otherwise a valid path from that top folder will be required in front of the image file name.
This App automatically upload your images, once you drag and drop them on the yellow image upload box in the centre of the bottom toolbar.
It is important for the best performance to resize and optimise your images - we talk more about this here.
Then drag and drop your image(s) into the images folder you have created in your web server root folder for your site. Then start creating your page.
You just need to insert the file name within the parenthesis in the link. Remember that filenames, like all urls, on the web are case sensitive.
If you get it right then the image will display in your new page as soon as you rebuild it.
Including Google Maps - use [GMap]
You can use Latitude and Longitude in either degrees, minutes, seconds or in decimal format to display an interactive Google Map. You need to include the "GMap" label. You can get the latitute and logitude of any location from Google Earth by Adding a Placemark, the information you need is shown in the Placemark data box.
The syntax is as follows, but remember that latitudes in the southern hemisphere are negative as are longitudes west of Greenwich:
use the degrees, minutes, seconds format like this
use the decimal format like this
Including YouTube Video Content - use [YTub]
You just need to label the link with "YTub" and then add the unique Youtube resource identifier as shown:
