6-level deep nested counters for autonumbered headings
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;
}
}
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
1 Posted by francois on 19 Jul, 2013 03:27 AM
The PDF output works properly, rendering this, so does the preview window, but not the HTML export output... why ?
Support Staff 2 Posted by Fletcher on 19 Jul, 2013 04:00 AM
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
Fletcher closed this discussion on 21 Jul, 2013 11:21 PM.
francois re-opened this discussion on 06 Aug, 2013 01:03 PM
3 Posted by francois on 06 Aug, 2013 01:03 PM
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)
};
}
Support Staff 4 Posted by Fletcher on 06 Aug, 2013 08:28 PM
Great -- thanks for the update!!
F-
Fletcher closed this discussion on 06 Aug, 2013 08:28 PM.