Custom CSS or Markup in Syntaxes and Themes?

Syntaxes & Themes
1

Is there a way to add a custom css class or an html tag to an element in the syntax, I’ve been trying to find something like that to add css styles to to custom elements I add to the syntax.

For example I have modified a Markdown Syntax to match (¨n )([\s\S]*)( ¨)

With the input text of:

A sentence ¨n with a note ¨ in custom syntax

  • To the groups 1 and 3 I added the markup scope
  • And to the group 2 I added a custom scope named zrapata.notes
  • In a custom theme I created a scope that changed the font weight to bold

The editor gives me a result like this

A sentence with a note in custom syntax

But don’t seem to find a way to access the zrapata.notes in a preview file.

So in the html just shows it as:

<p> A sentence ¨n with a note ¨ in custom syntax </p>

And in the documentation I don’t find a way to access it to be able to reflect the changes in the Previews

2

By preview file do you mean rendering it as HTML and viewing it in a Drafts preview window?

If so you would need to modify the engine that generates the HTML, or its input/output, not the syntax which is what shows in the editor. One way to do this would be to use an action to preprocessor the file to convert the custom syntax to to the appropriate HTML, which is valid standard Markdown, and then pass that on to preview.

2 Likes
3

Okay, thank you, that was exactly what I was asking, is there another way to do it, since I have no idea how to do that and as far as I can tell that would not work with the live Preview window

4

I just thought on how to do it with actions, but still if there’s another way it’ll be good to know, since the other problem still persists where the live preview will not work with it

5

@sylumer: I would say the syntax is the visual processing of a draft, how it is displayed.

An action starts processing the draft content and not the visual representation.

@Zrapata: you might need to do the same / similar steps you already did in the syntax inside an action to prepare the preview.

  1. find the note with a regex
  2. replace it with the new html output
  3. render it with markdown to html
markdown info…

Markdown allows html to be passed through.

You could check this feature by adding the output html you want to display manually to your note.

if you add html output with a class and you provide your custom css that might do the trick you are looking for.

Does this help you to solve your request?

6

Unfortunately, I do not agree.

The syntax is the definition of a data/content format. A Drafts syntax definition is how that format is shown and interacted with in the Drafts editor only.

For example Taskpaper is a standard syntax in Drafts. The syntax definition determines how the elements are defined and determines the behaviour in the editor (e.g. checkbox cycling). In combination with the Drafts theme, this will determine aspects such as the colour and size of an element in the editor. So it is a combination of these two that determines the visual presentation; but only in the Drafts editor.

Drafts’ preview is HTML based. Some Markdown flavours are available for automated conversion to HTML (Standard/MMD/GFM), but you could utilise others. On i*OS, options are relatively limited but you could utilise existing alternate transformation engines using say Shortcuts and A-shell, or perhaps Pythonista. On Mac, with access to the command line you have more options, and should you be a Marked2 user, there is an option for custom pre processors - I use this to render custom substitutions I have built.for my website, which is effectively what is going on here… but it is Mac only.

In Drafts, actions can incorporate a Preview step, or use the HTMLPreview class to render HTML representations. This does appear to be the type of Preview originally referenced. Such actions can pass modified content to these Preview steps, which is what I suggested and what you repeated in your response. It is equivalent to the Marked2 pre processor option as the action modifies the content to include the necessary HTML (part of the standard Markdown spec is HTML compatibility) then transforms the content into preview able HTML.

Correct. The live preview is a self contained feature in Drafts.if a live preview is key, then as long as you are using it on Mac only, you could use Marked2 (Drafts integrated an external live preview with it) with the preprocessor option to do the substitution I suggested to place in an action.

7

@Andreas_Haberle Yes, thats what I’ve been doing

In an action I get the draft in the editor, convert it to html and then change all the instances of them with my custom classes, so in the editor I see

¨n Sample Line ¨

And in the html export I see

<p><span class=“notes”>Sample Line</span></p>

@sylumer Thank you for the input, I use drafts mainly in my iPad, so I’ve been able to do a workaround with shortcuts that runs every few seconds that runs the action of my custom preview.

The only problem with that so far is that the preview only shows on the left window. But works good for me so far

2 Likes