I am making a markdown to docx converter using docx for JavaScript https://github.com/lancejpollard/md2docx.js/blob/make/index.ts . See the simple doc at the bottom for the styles I tried applying.
const doc = new Document({
title: 'Sample Document',
description: 'A brief example of using docx',
numbering: {
config: [
{
reference: 'bullet',
levels: [
{
level: 0,
format: LevelFormat.BULLET,
text: '*',
alignment: AlignmentType.LEFT,
style: {
paragraph: {
indent: {
left: convertInchesToTwip(0.5),
hanging: convertInchesToTwip(0.25),
},
},
},
},
{
level: 1,
format: LevelFormat.BULLET,
text: '*',
alignment: AlignmentType.LEFT,
style: {
paragraph: {
indent: {
left: convertInchesToTwip(1),
hanging: convertInchesToTwip(0.25),
},
},
},
},
{
level: 2,
format: LevelFormat.BULLET,
text: '*',
alignment: AlignmentType.LEFT,
style: {
paragraph: {
indent: {
left: 2160,
hanging: convertInchesToTwip(0.25),
},
},
},
},
{
level: 3,
format: LevelFormat.BULLET,
text: '*',
alignment: AlignmentType.LEFT,
style: {
paragraph: {
indent: {
left: 2880,
hanging: convertInchesToTwip(0.25),
},
},
},
},
{
level: 4,
format: LevelFormat.BULLET,
text: '*',
alignment: AlignmentType.LEFT,
style: {
paragraph: {
indent: {
left: 3600,
hanging: convertInchesToTwip(0.25),
},
},
},
},
],
},
{
reference: 'number',
levels: [
{
level: 0,
format: 'decimal',
text: '%1.',
alignment: AlignmentType.START,
style: {
paragraph: {
indent: { left: 720, hanging: 260 },
},
},
},
{
level: 1,
format: 'lowerLetter',
text: '%2)',
alignment: AlignmentType.START,
style: {
paragraph: {
indent: { left: 1440, hanging: 980 },
},
},
},
{
level: 2,
format: 'upperLetter',
text: '%3)',
alignment: AlignmentType.START,
style: {
paragraph: {
indent: { left: 2160, hanging: 1700 },
},
},
},
{
level: 3,
format: 'decimal',
text: '%4.',
alignment: AlignmentType.START,
style: {
paragraph: {
indent: { left: 2880, hanging: 2420 },
},
},
},
],
},
],
},
styles: {
paragraphStyles: [
{
id: 'Heading1',
name: 'Heading 1',
basedOn: 'Normal',
next: 'Normal',
quickFormat: true,
run: {
size: 32,
bold: true,
italics: true,
color: '#ff0000',
},
paragraph: {
spacing: {
after: 120,
},
},
},
{
id: 'Heading2',
name: 'Heading 2',
basedOn: 'Normal',
next: 'Normal',
quickFormat: true,
run: {
size: 28,
bold: true,
},
paragraph: {
spacing: {
before: 240,
after: 120,
},
},
},
{
id: 'Heading3',
name: 'Heading 3',
basedOn: 'Normal',
next: 'Normal',
quickFormat: true,
run: {
size: 24,
bold: true,
},
paragraph: {
spacing: {
before: 240,
after: 120,
},
},
},
{
id: 'Heading4',
name: 'Heading 4',
basedOn: 'Normal',
next: 'Normal',
quickFormat: true,
run: {
size: 20,
bold: true,
},
paragraph: {
spacing: {
before: 240,
after: 120,
},
},
},
// {
// id: 'paragraph',
// name: 'Paragraph',
// basedOn: 'Normal',
// quickFormat: true,
// paragraph: {
// spacing: {
// line: 276,
// before: 20 * 72 * 0.1,
// after: 20 * 72 * 0.05,
// },
// },
// },
],
},
sections: [
{
children: document,
},
],
})
I have some questions about how to style some stuff.
- How do you add padding before/after a whole list (but not list items or nested lists)?
- How do you neatly indent any combination of nested numbered/bulleted lists so each list item is 16px (or equivalent) from the left, and nested ones are 16px further from the parent?
Basically I want like 16px of spacing between paragraphs and lists in a document, and to customize the spacing underneath and above headers based on their font size.
My document looks like this so far, but I would like it to look nicer. Notice how the nested lists aren’t indented at all, and indentation is ugly.
Thanks for the help! Trying to make the list item indentation to look/work like StackOverflow’s markdown indentation for the questions/answers. Basically.
- nested list
- list item
- numbered
- one
- two