Compile to HTML, Custom CSS

I have my document with paragraph styles applied for headings 1-3 and would like to tell the compiler exactly what markup to use for those paragraphs. Is this possible?
I can get the compiler to generate:

<h2 style="margin: 13.0px 0.0px 0.0px 0.0px; font: 24.0px Optima"><b>Course Overview</b></h2>

but what I need it to generate is:

<h2 class="text-dark text-size-50 text-m-size-40">Course Overview</h2>

such that I can copy/paste it into the website structure I already have.
Additionally, I would like to take unstyled paragraphs and have them generate:

<p class="animated-element slow margin-bottom-30">Some text</p>

instead of:

<p class="p2">Some text</p>

My solution was to write a quick perl script to process the compile output. I’m leaving some code here in case someone else ever needs to do the same thing. It’s not perfect and needed some manual shuffling afterwards, but saved a lot of time. Scrivener remains my all time favorite writing software.

[code]#!/usr/bin/perl -w
use strict;

my $file = “zz.html”;
my $file2 = “zz_new.html”;

open(FILE, “<”.$file) || die “File not found”;
my @lines = ;

my @newlines;

foreach(@lines) {

# get rid of spans
if ($_ =~ /<span /){
	$_ =~ s/<span class=\"([^"]*)\">//g;
	$_ =~ s/<\/span>//g;

# general blank lines
$_ =~ s/<p class=\"p2\"><br><\/p>//g;

# paragraphs
$_ =~ s/<p class=\"p4\">/<p>/g;

# ... and a bunch of other replacements custom to my compile ...


open(FILE, “>”.$file2) || die “File not found”;
print FILE @lines;

You might find this recent post to be of interest to you. That is, if you don’t care for the approach of actually writing in Markdown to begin with, you can set up Scrivener to produce HTML via the MultiMarkdown engine (or for that matter any engine at all via the Processing pane), as a process of conversion for your rich text. Another advantage of using a Markdown-based approach for HTML generation is the Processing compile format pane (see §24.22 in the user manual), wherein you can have your Perl script executed automatically, and thus cause the compiler to generate the output you want in one click.

But something else that might be of interest is the notion of creating your own HTML generator. The plain-text file type (TXT) is a tool we put significant effort toward ensuring the capability of producing syntax—and our bar for that was valid XML, which of course encompasses modern HTML. It’s not all in one place in the compile format designer, because the scope of this is very broad. The separators pane, for example, is capable of inserting enclosing elements around things, as is of course the Prefix and Suffix tabs in the Section Layouts pane. Styles each individually have not only a line by line prefix/suffix but a paragraph level prefix/suffix. You can read more about the concept and the tools aimed at making syntax in §24.10 of the user manual PDF. The “Markup pane” covers not only the pane in question, but serves as a nexus section on this whole approach, providing cross-references to other useful areas of the compile interface.

Some examples:

  • In the Styles pane, the “Heading 2” style has a prefix of “

    ” and a suffix of “

  • There is a style named “Body Text” that inserts a paragraph prefix and suffix. That style is then dynamically applied to all “No Style” text in the draft folder via the Section Layout, by ticking the Override text and notes formatting option in the “Formatting” tab and using the style dropdown to apply the style to the sample text.
  • The HTML header and other boilerplate is placed into the Text Layout pane.
  • The Markup pane, where links, simple italics and even images in the editor can be handled.

I’ve attached a very simple demonstration of the concept. Give that a test compile, and you’ll see I’ve got basic internal links, an example of how to handle editor styles (block quote), headings, divs around section text, some sample CSS, and a few other things worth clicking through all the panes to discover. That is 100% hand-crafted HTML generated by Scrivener, artisan friendly. :wink: (79.2 KB)

Thank you! I’ll certainly look into this.