Styling Error of Dataview Markdown

[reaching-infinity]

Problem description

Inside a specific folder named “00.00 Index notes”, I created several (index) notes whose titles follow the pattern “xx.xx rest of title” where x is a number from 0 to 9. I also created a script that filters these index notes and generates an index table from them.

However, I’m encountering a styling issue. Although the script mostly works as intended, the first title is rendered incorrectly when I try to style the markdown output entirely in a monospace font.

Folder of index notes with index numbers

Script Output.

What I’m trying to do

I want the markdown output generated by DataviewJS to be displayed completely in a monospace font. However, I’m experiencing issues with the first title being rendered incorrectly. Below is the script I am using:

// Get all pages in the folder "00-09 System/00 Index/00.01 Index notes"
const folderPath = "00-09 System/00 Index/00.01 Index notes";
const pages = dv.pages(`"${folderPath}"`);

// Function to filter pages by prefix and create links
const filterPagesByPrefix = (prefix) => {
    return pages
        .filter(p => p.file.name.startsWith(prefix))
        .map(p => `[[${p.file.name}]]`);
};

// Mapping for individual titles
const systemTitles = {
    "00": "00-09 System",
    "10": "10-19 Area",
    "20": "20-29 Domain",
    // Add more mappings as needed
};

const indexTitles = {
    "00": "00 Index",
    "01": "01 Next Topic",
    "02": "02 More topics",
    "10": "10 Topic",
    "11": "11 Super topic",
    "21": "21 More",
    "22": "22 Cool",
    "23": "23 Krass"
    // Add more mappings as needed
};

// Generate sections dynamically
let content = "";
for (let i = 0; i <= 9; i++) {
    const systemKey = `${i}0`;
    const systemTitle = systemTitles[systemKey] || "";
    if (systemTitle) {
        content += `## ${systemTitle}\n`;
    }
    for (let j = 0; j <= 9; j++) {
        const prefix = `${i}${j}`;
        const indexTitle = indexTitles[prefix] || "";
        const filteredPages = filterPagesByPrefix(prefix);
        if (indexTitle && filteredPages.length > 0) {
            content += `### ${indexTitle}\n`;
            content += dv.markdownList(filteredPages) + '\n';
        }
    }
}

// HERE IS THE PROBLEMATIC LINE OF CODE

// Wrap the content in a div with inline CSS for monospace font
const wrappedContent = `<span><div style='font-family: monospace;'>${content}</div></span>`;

// Display the content
dv.paragraph(wrappedContent);

Things I have tried

I attempted to wrap the content in various HTML tags for font styling, but the problem persists. The outer span tag in <span><div style='font-family: monospace;'>${content}</div></span>; yielded some improvement.

The image below shows the output without outer span tags.

Request for Help

I would greatly appreciate any insights or solutions to ensure the markdown output is entirely styled in monospace font without rendering errors, especially for the first title.

[holroy]

You’re relying on some intermittent markdown rendering in your script, and that first section in that context isn’t recognised as markdown. Luckily this can be easily fixed so change the initial setting of content like in the following code excerpt, and it seems to handle the issue:

// Generate sections dynamically
let content = "\n";

This allows for a new line to be added in front of the other markdown, allowing for a better rendering.

[reaching-infinity]

Thank you @holroy. Your suggestion brought me on the right track. After further customisation of the script, I arrived at a really nice looking index table.

Improved Script:

// Get all pages in the folder "00-09 System/00 Index/00.01 Index notes"
const folderPath = "00-09 System/00 Index/00.01 Index notes";
const pages = dv.pages(`"${folderPath}"`);

// Function to filter pages by prefix and create links
const filterPagesByPrefix = (prefix) => {
    return pages
        .filter(p => p.file.name.startsWith(prefix))
        .map(p => `<a data-href="${p.file.name}" href="${p.file.name}" class="internal-link" target="_blank" rel="noopener" style="text-decoration: none;">${p.file.name}</a>`); // [[${p.file.name}]]
};

 // Use internal link syntax within a span

// Mapping for individual titles
const systemTitles = {
    "00": "00-09 System",
    "10": "10-19 Area",
    "20": "20-29 Domain",
    // Add more mappings as needed
};

const indexTitles = {
    "00": "00 Index",
    "01": "01 Next Topic",
    "02": "02 More topics",
    "10": "10 Topic",
    "11": "11 Super topic",
    "21": "21 More",
    "22": "22 Cool",
    "23": "23 Krass"
    // Add more mappings as needed
};

// Generate sections dynamically
let content = '\n\n' // Initialize with two newline characters
for (let i = 0; i <= 9; i++) {
    const systemKey = `${i}0`;
    const systemTitle = systemTitles[systemKey] || "";
    if (systemTitle) {
        content += `\n${systemTitle}\n\n`;
    }
    for (let j = 0; j <= 9; j++) {
        const prefix = `${i}${j}`;
        const indexTitle = indexTitles[prefix] || "";
        const filteredPages = filterPagesByPrefix(prefix);
        if (indexTitle && filteredPages.length > 0) {
            content += `&nbsp;&nbsp;&nbsp;${indexTitle}\n`;
            //content += dv.markdownList(filteredPages) + '\n';
            // Manually construct the markdown list with spaces
            
            filteredPages.forEach(page => {
	            
                content += `\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${page}\n\n`; // Add spaces to each list item
            });
        }
    }
}


// Wrap the content in a div with inline CSS for monospace font, line height, font size, and link styles
// Wrap the content in a div with inline CSS for monospace font, line height, and font size
const wrappedContent = `<div style='font-family: monospace; line-height: 0.5; font-size: 14px;'>${content}</div>`;


// Display the content
dv.span(wrappedContent);

End result: