Add theming support with --theme CLI option

- Add --theme command line option to specify custom CSS file
- Modify PDF generation to apply custom themes
- Update tests to support theme parameter
- Create comprehensive theme integration test
- Add colorful test theme with gradients and vibrant colors
- Move theme fixtures to dedicated tests/fixtures/theme/ directory

Author: rohaanhamid

src/index.ts

@@ -7,7 +7,8 @@ import { cleanupTempFiles, createTempDirectory } from "./utils/files";
 export async function convertMarkdownToPdf(
   inputPath: string,
   outputPath: string,
-  debugHtml: boolean = false
+  debugHtml: boolean = false,
+  themePath?: string
 ): Promise<void> {
   try {
     const markdown = fs.readFileSync(inputPath, "utf-8");
@@ -17,7 +18,13 @@ export async function convertMarkdownToPdf(
     const chunks = parseMarkdownIntoChunks(markdown);
 
     // Process chunks into PDF sources (pass debugHtml to emit intermediate HTML files)
-    const pdfsToMerge = await processChunksToPdfSources(chunks, inputPath, tempDir, debugHtml);
+    const pdfsToMerge = await processChunksToPdfSources(
+      chunks,
+      inputPath,
+      tempDir,
+      debugHtml,
+      themePath
+    );
 
     if (pdfsToMerge.length === 0) {
       throw new Error("No valid content or PDFs to process.");
@@ -46,25 +53,29 @@ program
   .description("Convert markdown files to PDF, resolving relative links and embedding PDFs")
   .version("1.0.0")
   .option("--debug-html", "Write intermediate HTML files next to generated PDFs")
+  .option("--theme <path>", "Path to a custom CSS file for styling")
   .argument("<input>", "Path to the markdown file")
   .argument(
     "[output]",
     "Path to the output PDF file (optional, defaults to <markdown-name>-generated.pdf)"
   )
-  .action(async (input: string, output?: string, options?: { debugHtml?: boolean }) => {
-    try {
-      // If output is not provided, generate default path
-      if (!output) {
-        const inputDir = input.substring(0, input.lastIndexOf("/") + 1 || 0);
-        const inputBasename = input.substring(input.lastIndexOf("/") + 1).replace(/\.md$/, "");
-        output = `${inputDir}${inputBasename}-generated.pdf`;
+  .action(
+    async (input: string, output?: string, options?: { debugHtml?: boolean; theme?: string }) => {
+      try {
+        // If output is not provided, generate default path
+        if (!output) {
+          const inputDir = input.substring(0, input.lastIndexOf("/") + 1 || 0);
+          const inputBasename = input.substring(input.lastIndexOf("/") + 1).replace(/\.md$/, "");
+          output = `${inputDir}${inputBasename}-generated.pdf`;
+        }
+        const debugHtml = !!(options && options.debugHtml);
+        const theme = options && options.theme;
+        await convertMarkdownToPdf(input, output, debugHtml, theme);
+      } catch (error) {
+        console.error("Error:", error);
+        process.exit(1);
       }
-      const debugHtml = !!(options && options.debugHtml);
-      await convertMarkdownToPdf(input, output, debugHtml);
-    } catch (error) {
-      console.error("Error:", error);
-      process.exit(1);
     }
-  });
+  );
 
 program.parse();

src/utils/pdf.test.ts

@@ -81,12 +81,12 @@ describe("pdf utils", () => {
     </script>
   </body>
 </html>`);
-      readFileMock.mockReturnValueOnce("body { color: red; }");
 
       const html = "<p>Hello</p>";
       const outputFilePath = "/path/to/output.pdf";
+      const css = "body { color: red; }";
 
-      await pdf.convertHtmlToPdf(html, outputFilePath);
+      await pdf.convertHtmlToPdf(html, outputFilePath, css);
 
       expect(puppeteer.launch).toHaveBeenCalled();
       expect(mockBrowser.newPage).toHaveBeenCalled();
@@ -203,6 +203,9 @@ describe("pdf utils", () => {
   describe("processChunksToPdfSources", () => {
     test("should process chunks and return PDF sources", async () => {
       (fs.promises.access as Mock<typeof fs.promises.access>).mockResolvedValue();
+      // Mock readFileSync to return a CSS string
+      (fs.readFileSync as Mock<typeof fs.readFileSync>).mockReturnValue("body { color: blue; }");
+
       const chunks: Chunk[] = [
         { type: "pdf", path: "1.pdf", pageOptions: { include: [1] } },
         { type: "markdown", content: "## Hello" },
@@ -220,6 +223,9 @@ describe("pdf utils", () => {
       (fs.promises.access as Mock<typeof fs.promises.access>).mockRejectedValue(
         new Error("File not found")
       );
+      // Mock readFileSync to return a CSS string
+      (fs.readFileSync as Mock<typeof fs.readFileSync>).mockReturnValue("body { color: blue; }");
+
       const consoleWarnSpy = spyOn(console, "warn").mockImplementation(() => {});
 
       const chunks: Chunk[] = [{ type: "pdf", path: "nonexistent.pdf" }];

src/utils/pdf.ts

@@ -19,6 +19,7 @@ import templateFile from "../templates/base.html" with { type: "file" };
 export async function convertHtmlToPdf(
   html: string,
   outputFilePath: string,
+  css: string,
   debugDumpHtml: boolean = false,
   baseDir?: string
 ): Promise<void> {
@@ -37,7 +38,6 @@ export async function convertHtmlToPdf(
 
   // @ts-expect-error CSS import fails here unfortunately
   const template = fs.readFileSync(templateFile, "utf-8");
-  const css = fs.readFileSync(defaultCssFile, "utf-8");
   let finalHtml = template.replace("{{content}}", html).replace("{{css}}", css);
 
   // Determine a base URL for resolving relative resources (images, etc).
@@ -136,11 +136,19 @@ export async function processChunksToPdfSources(
   chunks: Chunk[],
   inputPath: string,
   tmpDir: string,
-  debugDumpHtml: boolean = false
+  debugDumpHtml: boolean = false,
+  themePath?: string
 ): Promise<PdfSource[]> {
   const pdfsToMerge: PdfSource[] = [];
   let tempPdfCounter = 0;
 
+  let css: string;
+  if (themePath) {
+    css = fs.readFileSync(themePath, "utf-8");
+  } else {
+    css = fs.readFileSync(defaultCssFile, "utf-8");
+  }
+
   for (const chunk of chunks) {
     if (chunk.type === "pdf") {
       const pdfPath = path.resolve(path.dirname(inputPath), chunk.path);
@@ -156,7 +164,7 @@ export async function processChunksToPdfSources(
       const resolvedContent = resolveLinks(chunk.content, path.dirname(inputPath));
       const html = convertMarkdownToHtml(resolvedContent);
       const tempPdfPath = path.join(tmpDir, `temp_${tempPdfCounter++}.pdf`);
-      await convertHtmlToPdf(html, tempPdfPath, debugDumpHtml, path.dirname(inputPath));
+      await convertHtmlToPdf(html, tempPdfPath, css, debugDumpHtml, path.dirname(inputPath));
       pdfsToMerge.push({ path: tempPdfPath });
     }
   }

tests/fixtures/pdf/themed-generated.pdf

@@ -0,0 +1,171 @@
+body {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+  margin: 40px !important;
+  padding: 30px !important;
+  border: 3px solid #ff6b6b !important;
+  border-radius: 15px !important;
+  color: #ffffff !important;
+}
+
+h1 {
+  color: #ffd93d !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
+  font-size: 2.5em !important;
+}
+
+h2 {
+  color: #6bcf7f !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+  border-bottom: 3px solid #4ecdc4 !important;
+  padding-bottom: 0.3em !important;
+}
+
+h3 {
+  color: #4ecdc4 !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+h4 {
+  color: #45b7d1 !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+h5 {
+  color: #f9ca24 !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+h6 {
+  color: #f0932b !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  margin-top: 1.5em !important;
+  margin-bottom: 0.5em !important;
+}
+
+p {
+  line-height: 1.8 !important;
+  color: #ffffff !important;
+  text-align: justify !important;
+  margin-bottom: 1em !important;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
+}
+
+code {
+  background-color: #2d3748 !important;
+  border: 2px solid #e53e3e !important;
+  border-radius: 8px !important;
+  padding: 4px 8px !important;
+  font-family: "Fira Code", "Courier New", monospace !important;
+  color: #68d391 !important;
+  font-weight: bold !important;
+}
+
+pre {
+  background: linear-gradient(45deg, #2d3748, #4a5568) !important;
+  border: 2px solid #3182ce !important;
+  border-radius: 10px !important;
+  padding: 15px !important;
+  overflow-x: auto !important;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+
+pre code {
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  color: #9ae6b4 !important;
+}
+
+ul,
+ol {
+  margin-left: 20px !important;
+  line-height: 1.8 !important;
+}
+
+li {
+  margin-bottom: 0.5em !important;
+  color: #ffffff !important;
+}
+
+blockquote {
+  border-left: 6px solid #ffd93d !important;
+  padding-left: 15px !important;
+  font-style: italic !important;
+  color: #e2e8f0 !important;
+  background-color: rgba(255, 217, 61, 0.1) !important;
+  padding: 15px !important;
+  border-radius: 8px !important;
+  margin: 1em 0 !important;
+}
+
+a {
+  color: #63b3ed !important;
+  text-decoration: none !important;
+  font-weight: bold !important;
+  border-bottom: 2px solid #63b3ed !important;
+  transition: all 0.3s ease !important;
+}
+
+a:hover {
+  color: #4299e1 !important;
+  border-bottom-color: #4299e1 !important;
+}
+
+table {
+  border-collapse: collapse !important;
+  width: 100% !important;
+  margin-bottom: 1em !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-radius: 8px !important;
+  overflow: hidden !important;
+}
+
+th,
+td {
+  border: 1px solid #4a5568 !important;
+  padding: 12px !important;
+  text-align: left !important;
+  color: #ffffff !important;
+}
+
+th {
+  background: linear-gradient(45deg, #667eea, #764ba2) !important;
+  font-weight: bold !important;
+  color: #ffffff !important;
+  text-transform: uppercase !important;
+  letter-spacing: 1px !important;
+}
+
+tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+img {
+  max-width: 100% !important;
+  height: auto !important;
+  border: 3px solid #ffd93d !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+}
+
+.markdown-body {
+  max-width: none !important;
+}