6-level deep nested counters for autonumbered headings

francois's Avatar

francois

19 Jul, 2013 03:13 AM

Folks,

My contribution to the MMD Composer community.

I've finally managed to create a style which has MS Word-style nested 6-level deep (H1 to H6) counters.

I hope that this will spare you all a lot of time creating styles with CSS syntax for incrementing and resetting counters.

-=Francois=-

# Chapter 1#
## Subheading 1.1 ##
## Subheading 1.2 ##
## Subheading 1.3 ##
# Chapter 2#
## Subheading 2.1 ##
### Subheading 2.1.1 ##
### Subheading 2.1.2 ##
## Subheading 2.2 ##
### Subheading 2.1.1 ##
### Subheading 2.1.2 ##
# Chapter 3#
## Subheading 3.1 ##
## Subheading 3.2 ##
### Subheading 3.2.1 ##
### Subheading 3.2.2 ##
#### Subheading 3.2.2.1 ##
#### Subheading 3.2.2.2 ##
##### Subheading 3.2.2.2.1 ##
##### Subheading 3.2.2.2.2 ##
###### Subheading 3.2.2.2.2.1 ##
###### Subheading 3.2.2.2.2.2 ##

************* CONTENTS TO BE ADDED TO STYLE FILE **************

css = "
body {
     background:#fff;
     color:#000;
     font-family: Didot;
     font-size:14px;
     line-height:170%;
     text-align: justify;
     counter-reset: chapter; // FDM 130718 - Essential declaration of 'chapter' for nested counters H1 to H6 to work
}

H1:before {
content: counter(chapter) \". \";
counter-increment: chapter;
}

H1 {
counter-reset: SectionH2;
}

H2:before {
content: counter(chapter) \".\" counter(SectionH2) \" \";
counter-increment: SectionH2;
}

H2 {
counter-reset: SectionH3;
}

H3:before {
content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \" \";
counter-increment: SectionH3;
}

H3 {
counter-reset: SectionH4;
}

H4:before {
content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \" \";
counter-increment: SectionH4;
}

H4 {
counter-reset: SectionH5;
}

H5:before {
content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \".\" counter(SectionH5) \" \";
counter-increment: SectionH5;
}

H5 {
counter-reset: SectionH6;
}

H6:before {
content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \".\" counter(SectionH5) \".\" counter(SectionH6) \" \";
counter-increment: SectionH6;
}

}

  1. 1 Posted by francois on 19 Jul, 2013 03:27 AM

    francois's Avatar

    The PDF output works properly, rendering this, so does the preview window, but not the HTML export output... why ?

  2. Support Staff 2 Posted by Fletcher on 19 Jul, 2013 04:00 AM

    Fletcher's Avatar

    This bug has been fixed for a future release, so that the CSS will be included when exporting, provided you turn on the preference to do so.

    Thanks for sharing your work on adding nested counters!

    FTP

  3. Fletcher closed this discussion on 21 Jul, 2013 11:21 PM.

  4. francois re-opened this discussion on 06 Aug, 2013 01:03 PM

  5. 3 Posted by francois on 06 Aug, 2013 01:03 PM

    francois's Avatar

    Fletcher,

    I can confirm that v2.4.3 build 25 produces the following HTML syntax from the MD file and that the output is rendered properly in Safari.

    <!DOCTYPE html>
    <html>
    <head><style type="text/css">
    body {
         background:#fff;
         color:#000;
         font-family: Didot;
         font-size:14px;
         line-height:170%;
         text-align: justify;
         counter-reset: chapter; // FDM 130718 - Essential declaration of 'chapter' for nested counters H1 to H6 to work
    }
    table { border: solid black; border-width: 2px 0px; empty-cells: hide; border-spacing: 0px; padding: 2px; margin: 20px auto;}
    table caption { margin: 5px; text-align: center; caption-side: bottom;}
    thead th { border: solid gray; border-width: 0 0 2px 0; padding: 5px;}
    thead > tr:last-child > th { border-style: none; }
    tbody > tr:first-child > td { border: solid gray; border-width: 1px 0 0 0;}
    tbody > tr:first-child > th { border: solid gray; border-width: 1px 0 0 0;}
    thead + tbody > tr:first-child > td { border: solid black; border-width: 1px 0 0 0;}
    thead + tbody > tr:first-child > th { border: solid black; border-width: 1px 0 0 0;}
    del.critic {background:#fae6e6;}
    ins.critic {background:#ecfce6}
    a.footnote, a.citation {font-size: 0.83em; vertical-align: super;}

    H1:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    }

    H1 {
    counter-reset: SectionH2;
    }

    H2:before {
    content: counter(chapter) "." counter(SectionH2) " ";
    counter-increment: SectionH2;
    }

    H2 {
    counter-reset: SectionH3;
    }

    H3:before {
    content: counter(chapter) "." counter(SectionH2) "." counter(SectionH3) " ";
    counter-increment: SectionH3;
    }

    H3 {
    counter-reset: SectionH4;
    }

    H4:before {
    content: counter(chapter) "." counter(SectionH2) "." counter(SectionH3) "." counter(SectionH4) " ";
    counter-increment: SectionH4;
    }

    H4 {
    counter-reset: SectionH5;
    }

    H5:before {
    content: counter(chapter) "." counter(SectionH2) "." counter(SectionH3) "." counter(SectionH4) "." counter(SectionH5) " ";
    counter-increment: SectionH5;
    }

    H5 {
    counter-reset: SectionH6;
    }

    H6:before {
    content: counter(chapter) "." counter(SectionH2) "." counter(SectionH3) "." counter(SectionH4) "." counter(SectionH5) "." counter(SectionH6) " ";
    counter-increment: SectionH6;
    }

    H1 { page-break-after: always; }
    H1:not(:first-of-type) { page-break-before: always; }
    H2:not(:first-of-type) {page-break-before: always; page-break-after: avoid;}
    H3, H4, H5, H6 { page-break-after: avoid; }
    h3+p,h4+p,h5+p,h6+p { page-break-before: avoid; }
    caption:before, figcaption:before {counter-increment: FigureNo; content: counter(ChapterNo) "-" counter(FigureNo) ": "}
    @page :left { @bottom-left { content: counter(page) " " string(BookTitle); } }
    @page :right { @bottom-right { content: string(Chapter) " " counter(page); } }
    head > title { string-set: BookTitle self; }
    H2 { string-set: Chapter self before; }
    @page {size: 5.5in 8.5in;}
    @page chapters:left {margin: 0.75in 0.75in 1.125in 0.62in; padding-left: 0.5in;}
    @page chapters:right {margin: 0.75in 0.62in 1.125in 0.75in; padding-right: 0.5in;}
    </style>

    <title></title>
    <meta charset="utf-8"/>
    </head>
    <body>
    <p>This is a test of 6 level nested auto numbering in MMD Composer v2.4.3 Build 25</p>

    <h1 id="chapter1">Chapter 1</h1>

    <h2 id="subheading1.1">Subheading 1.1</h2>

    <h3 id="subheading1.1.1">Subheading 1.1.1</h3>

    <h3 id="subheading1.1.2">Subheading 1.1.2</h3>

    <h2 id="subheading1.2">Subheading 1.2</h2>

    <h3 id="subheading1.1.1">Subheading 1.1.1</h3>

    <h3 id="subheading1.1.2">Subheading 1.1.2</h3>

    <h1 id="chapter2">Chapter 2</h1>

    <h2 id="subheading2.1">Subheading 2.1</h2>

    <h3 id="subheading2.1.1">Subheading 2.1.1</h3>

    <h3 id="subheading2.1.2">Subheading 2.1.2</h3>

    <h2 id="subheading2.2">Subheading 2.2</h2>

    <h3 id="subheading2.1.1">Subheading 2.1.1</h3>

    <h3 id="subheading2.1.2">Subheading 2.1.2</h3>

    <h1 id="chapter3">Chapter 3</h1>

    <h2 id="subheading3.1">Subheading 3.1</h2>

    <h2 id="subheading3.2">Subheading 3.2</h2>

    <h3 id="subheading3.2.1">Subheading 3.2.1</h3>

    <h3 id="subheading3.2.2">Subheading 3.2.2</h3>

    <h4 id="subheading3.2.2.1">Subheading 3.2.2.1</h4>

    <h4 id="subheading3.2.2.2">Subheading 3.2.2.2</h4>

    <h5 id="subheading3.2.2.2.1">Subheading 3.2.2.2.1</h5>

    <h5 id="subheading3.2.2.2.2">Subheading 3.2.2.2.2</h5>

    <h6 id="subheading3.2.2.2.2.1">Subheading 3.2.2.2.2.1</h6>

    <h6 id="subheading3.2.2.2.2.2">Subheading 3.2.2.2.2.2</h6>

    <h1 id="chapter4">Chapter 4</h1>

    <h2 id="subheading4.1">Subheading 4.1</h2>

    <h2 id="subheading4.2">Subheading 4.2</h2>

    <h3 id="subheading4.2.1">Subheading 4.2.1</h3>

    <h3 id="subheading4.2.2">Subheading 4.2.2</h3>

    <h4 id="subheading4.2.2.1">Subheading 4.2.2.1</h4>

    <h4 id="subheading4.2.2.2">Subheading 4.2.2.2</h4>

    <h5 id="subheading4.2.2.2.1">Subheading 4.2.2.2.1</h5>

    <h5 id="subheading4.2.2.2.2">Subheading 4.2.2.2.2</h5>

    <h6 id="subheading4.2.2.2.2.1">Subheading 4.2.2.2.2.1</h6>

    <h6 id="subheading4.2.2.2.2.2">Subheading 4.2.2.2.2.2</h6>
    </body></html>

    --------

    Original MMD syntax:

    This is a test of 6 level nested auto numbering in MMD Composer v2.4.3 Build 25
    # Chapter 1#
    ## Subheading 1.1 ##
    ### Subheading 1.1.1 #
    ### Subheading 1.1.2 ##
    ## Subheading 1.2 ##
    ### Subheading 1.1.1 ##
    ### Subheading 1.1.2 ##
    # Chapter 2#
    ## Subheading 2.1 ##
    ### Subheading 2.1.1 #
    ### Subheading 2.1.2 ##
    ## Subheading 2.2 ##
    ### Subheading 2.1.1 ##
    ### Subheading 2.1.2 ##
    # Chapter 3#
    ## Subheading 3.1 ##
    ## Subheading 3.2 ##
    ### Subheading 3.2.1 ##
    ### Subheading 3.2.2 ##
    #### Subheading 3.2.2.1 ##
    #### Subheading 3.2.2.2 ##
    ##### Subheading 3.2.2.2.1 ##
    ##### Subheading 3.2.2.2.2 ##
    ###### Subheading 3.2.2.2.2.1 ##
    ###### Subheading 3.2.2.2.2.2 ##
    # Chapter 4#
    ## Subheading 4.1 ##
    ## Subheading 4.2 ##
    ### Subheading 4.2.1 ##
    ### Subheading 4.2.2 ##
    #### Subheading 4.2.2.1 ##
    #### Subheading 4.2.2.2 ##
    ##### Subheading 4.2.2.2.1 ##
    ##### Subheading 4.2.2.2.2 ##
    ###### Subheading 4.2.2.2.2.1 ##
    ###### Subheading 4.2.2.2.2.2 ##

    ----
    Content of the style file

    // Elegant style for MultiMarkdown Composer
    // by Fletcher T. Penney
    // Modified by FM for Autonumbering 130718
    // Colors can be:
    // #RGB (with or without the '#')
    // #RRGGBB
    // #ARGB (the A is for alpha)
    // #AARRGGBB
    //
    // List of elements that can have formatting applied:
    // default
    // blockquote
    // bold
    // boldAndItalic
    // codeBlock
    // codeSpan
    // comment
    // heading
    // heading1 - heading6
    // italic
    // link - Markdown links, e.g. [foo](bar)
    // list
    // math
    // metadata
    // table
    // URL - the actual clickable URL (if enabled)
    {
        autoZoomHorizontalPadding = 50; // Left and Right padding to use when Auto Zoom is on
        backgroundColor = eee; // Color to be used for the background
        caretColor = 000; // Color to be used for the cursor
        focusMode = 1; // Should Focus Mode be turned on when this theme is enabled?
        typewriterMode = 1; // Should Typewriter Mode be turned on when this theme is enabled?
        foregroundColor = 000; // Color to be used for the text
        markupForegroundColor = 8000; // Color to be used for markup text foreground
                                        // Can also set a background color

    // CSS is applied to the preview pane to allow you to match colors, or apply any other desired formatting

    css = "
    body {
         background:#fff;
         color:#000;
         font-family: Didot;
         font-size:14px;
         line-height:170%;
         text-align: justify;
         counter-reset: chapter; // FDM 130718 - Essential declaration of 'chapter' for nested counters H1 to H6 to work
    }
    table { border: solid black; border-width: 2px 0px; empty-cells: hide; border-spacing: 0px; padding: 2px; margin: 20px auto;}
    table caption { margin: 5px; text-align: center; caption-side: bottom;}
    thead th { border: solid gray; border-width: 0 0 2px 0; padding: 5px;}
    thead > tr:last-child > th { border-style: none; }
    tbody > tr:first-child > td { border: solid gray; border-width: 1px 0 0 0;}
    tbody > tr:first-child > th { border: solid gray; border-width: 1px 0 0 0;}
    thead + tbody > tr:first-child > td { border: solid black; border-width: 1px 0 0 0;}
    thead + tbody > tr:first-child > th { border: solid black; border-width: 1px 0 0 0;}
    del.critic {background:#fae6e6;}
    ins.critic {background:#ecfce6}
    a.footnote, a.citation {font-size: 0.83em; vertical-align: super;}

    H1:before {
    content: counter(chapter) \". \";
    counter-increment: chapter;
    }

    H1 {
    counter-reset: SectionH2;
    }

    H2:before {
    content: counter(chapter) \".\" counter(SectionH2) \" \";
    counter-increment: SectionH2;
    }

    H2 {
    counter-reset: SectionH3;
    }

    H3:before {
    content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \" \";
    counter-increment: SectionH3;
    }

    H3 {
    counter-reset: SectionH4;
    }

    H4:before {
    content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \" \";
    counter-increment: SectionH4;
    }

    H4 {
    counter-reset: SectionH5;
    }

    H5:before {
    content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \".\" counter(SectionH5) \" \";
    counter-increment: SectionH5;
    }

    H5 {
    counter-reset: SectionH6;
    }

    H6:before {
    content: counter(chapter) \".\" counter(SectionH2) \".\" counter(SectionH3) \".\" counter(SectionH4) \".\" counter(SectionH5) \".\" counter(SectionH6) \" \";
    counter-increment: SectionH6;
    }

    H1 { page-break-after: always; }
    H1:not(:first-of-type) { page-break-before: always; }
    H2:not(:first-of-type) {page-break-before: always; page-break-after: avoid;}
    H3, H4, H5, H6 { page-break-after: avoid; }
    h3+p,h4+p,h5+p,h6+p { page-break-before: avoid; }
    caption:before, figcaption:before {counter-increment: FigureNo; content: counter(ChapterNo) \"-\" counter(FigureNo) \": \"}
    @page :left { @bottom-left { content: counter(page) \" \" string(BookTitle); } }
    @page :right { @bottom-right { content: string(Chapter) \" \" counter(page); } }
    head > title { string-set: BookTitle self; }
    H2 { string-set: Chapter self before; }
    @page {size: 5.5in 8.5in;}
    @page chapters:left {margin: 0.75in 0.75in 1.125in 0.62in; padding-left: 0.5in;}
    @page chapters:right {margin: 0.75in 0.62in 1.125in 0.75in; padding-right: 0.5in;}
    ";

        horizontalPadding = 20; // Left and Right padding to use when Auto Zoom is off
        justifyText = 1; // Should justification be turned on?
        lineLength = 75; // Maximum line length (in characters)
        lineHeight = 1.7; // Line spacing ( 1.7 = 170% )
        monoFontSize = 12; // Font size to be used for monospaced text
        monoFontName = Courier; // Font to be used for monospaced text (use quotes for multiword names, e.g. "Courier New")
        default = { // Default is applied to all text, unless superseded by a more specific setting
            fontName = Didot; // Font to be used for this feature (e.g. default)
            fontSize = 13.5; // Font size to be applied
            kerning = 0.3; // Kerning to be applied (look up kerning on internet if you're not sure what this is)
        };

        metadata = { // Formatting to be applied to the metadata at the top of the document
            foregroundColor = 7000;
            kerning = 0.2;
        };

    // All Headings

        heading = { // General heading formatting
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1; // Turn on bold if the font supports it
        };

    // Heading 1

        heading1 = { // Level 1 headings only
            fontSize = 17;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
    // markupForegroundColor = 0C0;// custom colors for the markup if desired
    // markupBackgroundColor = C00;
            bold = 1;
        };

    // Heading 2

        heading2 = {
            fontSize = 15;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1;

        };

    // Heading 3

        heading3 = {
            fontSize = 14;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1;

        };

    // Heading 4

        heading4 = {
            fontSize = 13;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1;

        };

    // Heading 5

        heading5 = {
            fontSize = 12;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1;

        };

    // Heading 6

        heading6 = {
            fontSize = 11;
            fontName = Didot;
            foregroundColor = 555;
            backgroundColor = 10000000;
            bold = 1;

        };

    // Heading 6

        codeSpan = { // Spans of code, e.g. `this is code`
            mono = 1; // Use the mono font specified earlier
        };
        codeBlock = { // Verbatim or Code blocks
            backgroundColor = 08000000;
            mono = 1;
        };
        URL = { // Formatting that is applied to "clickable" links
            foregroundColor = 555;
            underline = 1; // 1 = single underline
                                        // 0 = no underline
                                        // 2 = thick underline
                                        // 4 = very thick underline
                                        // 9 = double underline
        };
        bold = { // We want bold text to be displayed in bold
            bold = 1;
        };
        italic = { // We want italicized text to be displayed in italics
            italic = 1;
        };
        boldAndItalic = { // Any guess what we want here?
            bold = 1;
            italic = 1;
        };
        comment = { // HTML comments (e.g. <!-- This is a comment --> )
            foregroundColor = 8000;
        };
        list = {
            leftIndent = 30; // Left margin indenting (per list level)
            rightIndent = 30; // Right margin indenting (total)
        }; // Default for all is 30
        blockquote = {
            leftIndent = 30; // Left margin indenting (per blockquote level)
            rightIndent = 30; // Right margin indenting (total)
        };
    }

  6. Support Staff 4 Posted by Fletcher on 06 Aug, 2013 08:28 PM

    Fletcher's Avatar

    Great -- thanks for the update!!

    F-

  7. Fletcher closed this discussion on 06 Aug, 2013 08:28 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac