Create a new folder called documents in your project. Then, create a new file called Book.tsx in the documents folder and include the following code:
Copy
import { Document, Footer } from "@htmldocs/react"import MarkdownIt from 'markdown-it'import "~/index.css"const MARKDOWN_CONTENT = `# The Art of Programming## Chapter 1: FundamentalsProgramming is both a science and an art. It requires logical thinking and creative problem-solving. In this book, we will explore the principles that make software development a fascinating discipline.### 1.1 The Programming MindsetTo become an effective programmer, one must develop a particular way of thinking. This includes:- Breaking down complex problems into manageable parts- Thinking algorithmically about solutions- Understanding data structures and their applications- Embracing continuous learning and adaptationThe journey of a programmer is one of constant growth and discovery.`const md = new MarkdownIt({ html: true })function Book() { const html = md.render(MARKDOWN_CONTENT) return ( <Document size="6in 9in" orientation="portrait" margin="0.75in"> <article className="prose max-w-none font-serif"> <div dangerouslySetInnerHTML={{ __html: html }} /> </article> <Footer position="bottom-center" className="font-serif text-sm" children={({ currentPage }) => currentPage} marginBoxStyles={{ marginBottom: '0.25in', }} /> </Document> )}Book.documentId = "book"export default Book
Run the development server by running:
Copy
npm run dev
This will start a live preview of your documents in your browser.