DevonThink: Crazy CSS for DTTG under IOS

Markdown for IOS

Since the update 2.1.4 for DTTG it is now possible to use your own crazy styles in your own cloud with IOS for markdown. You can create your own crazy Cascading Style Sheets (CSS) for DTTG under IOS as you wish.

Does it make sense?

As before, you can use CMD+ALT+P to preview your markdown document. Before this update it has shown you the default style - but now you can easily create your own style and use it!

It is not only a matter of text format but also you can include your own commands to be used - that was not possible before! Personally, I like to use underlined text in my markdown documents and that is now possible with DTTG.

Devise your own crazy style

How does it work?

Pretty easy - it is text! A CSS file is nothing more than pure text ending on .css. No magic involved

Ok, what do I have to include in my crazy CSS?

A couple of code lines ...... H E L P ......

Here is one example of such a line and will show how to format the first header:

h1 {

backkround-color: #F0E68C;
color: #224;
text-align: center;
}.

Do not be worried at all! The CSS file as well as some example for markdown under DTTG including two HTML files you can download here:

[sdm_download id="5621" fancy="0" color="blue" button_text="My Download"]

How do I get it to DTTG under IOS now?

I recommend that you create this document directly in DTTG or in DevonThinkProOffice. You will use a:

  • New pure text file
  • a piece of code step-by-step.

If you download my files, there is no need to do this step - everything is ready to use with DTTG. Just drag-and-drop the files into DTTG and use it. Try CMD+ALT+P to preview the markdown files.

Please pay attention to the following....

The style sheet needs to be located within the same database which you are using for your markdown files. The emphasise is database - the folder does not matter. Further to this it is vital to give the file an unique name for your style sheet.

Surely, you can use also x-Callback-URL or combine it with your markdown. However, that is a lesson for later - for a start the file name is just fine.

Markdown under IOS - Your first file

It is important to include a first line in your document which looks pretty much like:

<link rel="stylesheet" type="text/css" href= "Style.css">, "Style.css" is the filename of your CSS (title).

What does the link do?

  • link Tells the file to look for a related document under href
  • rel (ationship) Is the relationship between the files - here, it is style.
  • type Gibt den Typ des verlinkten Dokumentes wieder. Dieser kann auch Medien zum Beispiel sein.
  • href Ist die URL oder Referenz wo das zu verlinkende Dokument sich befindet.

Solved

A next step in done in order to work much more productive, paperless and faster within your own cloud. You will appreciate this feature of CSS as you do not have to export your markdown document into another program just for formatting and sharing it. Now, you can do everything from IOS.

Try it out! With some time, you will create your own crazy style using markdown and DTTG and will be much more productive in the future.

Download

I have included some before-after-file for you in this download. So, you will be able to see the differences in format and commands which you can use in your own markdown files. The file is in zip format and contains:

  • Style.css The Cascading Style Sheets
  • DTTG_Standard.md "Before" markdown text in the standard format
  • DTTG_Standard.html HTML-file to view the standard in your browser
  • DTTG mit CSS.md Markdown with link to CSS
  • DTTG mit CSS.html HTML-file to view the new format and functions.

Please note, that the documentation if in English and German but the text itself is in German only and is selfexplanatory.

Having said that it means:

  • Überschriften = Header
  • Hier ein unterstrichener Text = Here is an underlined text
  • "Wie merke ich ..." = How can I recall all the shortcuts? The truth is I cannot - I use Typinator - Remember they got their birthday surprise and celebration going on!
  • "Geburtstag" - Celebrate with them and save 45% Typinator

Comments