212 lines
9.0 KiB
HTML
212 lines
9.0 KiB
HTML
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" type="image/jpg" href="https://branding.ewpratten.com/pfp/2022/460x460.webp" />
|
|
|
|
<link rel="canonical" href="https://ewpratten.com/blog/notetaking-with-latex/" />
|
|
|
|
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://ewpratten.com/rss.xml">
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="og:site" content="ewpratten.com" />
|
|
<meta name="og:site_name" content="Evan Pratten" />
|
|
|
|
|
|
<meta name="og:image"
|
|
content="https://branding.ewpratten.com/pfp/2022/460x460.webp" />
|
|
|
|
|
|
<meta property="og:description" content="Using a lot of tech to replace a piece of paper" />
|
|
<meta property="description" content="Using a lot of tech to replace a piece of paper" />
|
|
<meta name="description" content="Using a lot of tech to replace a piece of paper">
|
|
|
|
|
|
<meta property="og:title" content="Taking notes with Markdown and LaTeX - Evan Pratten" />
|
|
|
|
|
|
|
|
<meta property="og:type" content="article" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Taking notes with Markdown and LaTeX | Evan Pratten</title>
|
|
|
|
|
|
<link rel="stylesheet" href="/global.css">
|
|
|
|
|
|
<link rel="stylesheet" href="/dist/github-markdown-css/github-markdown-light.css" lazyload>
|
|
<link rel="stylesheet" href="/styles/bootstrap.css" lazyload>
|
|
<link rel="stylesheet" href="/styles/typography.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/styles/components/heading-card.css">
|
|
|
|
|
|
<div class="heading-card">
|
|
<div class="profile-photo-container">
|
|
<img src="https://branding.ewpratten.com/pfp/2022/460x460.webp" alt="Profile Photo" loading="lazy">
|
|
</div>
|
|
<div class="text-container">
|
|
<h1>Evan Pratten</h1>
|
|
<p>Software Developer</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/styles/components/navbar.css">
|
|
|
|
|
|
<div class="ewp-navbar">
|
|
<hr>
|
|
<ul class="navbar-items">
|
|
<li><a href="/">Home</a></li>
|
|
<li class="separator">|</li>
|
|
<li><a href="/timeline">Timeline</a></li>
|
|
<li class="separator">|</li>
|
|
<li class="dropdown-center">
|
|
<a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
More
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
|
|
|
|
<li><a class="dropdown-item" href="/photography">Photography</a></li>
|
|
<li><a class="dropdown-item" href="/contact">Contact</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<article id="content" class="container markdown-body">
|
|
|
|
<h1 style="margin-bottom:0;padding-bottom:0;">Taking notes with Markdown and LaTeX</h1>
|
|
<em>Using a lot of tech to replace a piece of paper</em>
|
|
<br><br>
|
|
|
|
<p><em>You can view my public demo for this post <a rel="noopener" target="_blank" href="https://github.com/Ewpratten/school-notes-demo">here</a></em></p>
|
|
<p>Recently, I have been on a bit of a mission to improve my school workflow with software. Over the past month, I have built a cleaner <a rel="noopener" target="_blank" href="https://github.com/Ewpratten/student_portal#unofficial-tvdsb-student-portal-webapp">student portal</a> for my school and <a rel="noopener" target="_blank" href="https://github.com/Ewpratten/timeandplace-api#timeandplace-api--cli-application">written a tool</a> for automating in-class attendance. Alongside working on these projects, I have also been refining my notetaking system for school.</p>
|
|
<p>Since 9th grade, I have been taking notes in a private GitHub repository in markdown, and have been compiling them to HTML using a makefile for each course. While this system has worked ok, It has been far from perfect. Recently, I have been working very hard to give this system a much-needed upgrade. Here is the new tech stack:</p>
|
|
<ul>
|
|
<li>The <a rel="noopener" target="_blank" href="https://bazel.build">Bazel buildsystem</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Markdown">Markdown</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://www.mathjax.org/">MathJax</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://ctan.org/pkg/beamer">Beamer</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://ctan.org/pkg/pgf">Tikz & PGF</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://pandoc.org/">Pandoc</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://pwmt.org/projects/zathura/">Zathura</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://docs.bazel.build/versions/master/skylark/language.html">Starlark</a></li>
|
|
<li><a rel="noopener" target="_blank" href="https://github.com/features/actions">Github Actions</a> CI</li>
|
|
</ul>
|
|
<p>The idea is that every course I take becomes its own Bazel package, with subpackages for things like assignments, papers, notes, and presentations. I can compile everything just by running the command <code>bazel build //:all</code>. All builds are cached using Bazel's build caching system, so when I run the command to compile my notes (I love saying that), I only end up compiling things that have changed since the last run. The setup for all of this is quite simple. All that is really needed is a Bazel workspace with the <a rel="noopener" target="_blank" href="https://github.com/ProdriveTechnologies/bazel-pandoc"><code>bazel_pandoc</code></a> rules loaded (although I have opted to use some custom <a rel="noopener" target="_blank" href="https://docs.bazel.build/versions/master/be/general.html#genrule">genrules</a> instead). Using these rules, markdown files can be concatenated, and compiled into a PDF. I also use a modified version of the <a rel="noopener" target="_blank" href="https://github.com/Wandmalfarbe/pandoc-latex-template">Eisvogel</a> Pandoc template to make all my documents look a little neater.</p>
|
|
<p>In terms of workflow, I write all my notes as markdown files with <a rel="noopener" target="_blank" href="https://pandoc.org/MANUAL.html#math">embedded LaTeX</a> for any equations and charts I may need. All of this is done inside of VSCode, and I have a custom <code>tasks.json</code> file that lets me press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>b</kbd> to re-compile whatever I am currently working on. I also keep Zathura open in a window to the side for a nearly-live preview system.</p>
|
|
<script src="https://gist.github.com/Ewpratten/163aa9c9cb4e8c20e732e3713c95c915.js" ></script>
|
|
<p><img src="/images/posts/latex-notes/hs_notes_workflow.png" alt="" />
|
|
<em>A screenshot of my workspace</em></p>
|
|
<p>Now, the question came up of <em>"how do you easily distribute notes and assignments to classmates and professors?"</em>. That question got me stuck for a while, but here is the system I have come up with:</p>
|
|
<ol>
|
|
<li>I write an assignment</li>
|
|
<li>I push it to the private GitHub repository</li>
|
|
<li>GitHub Actions picks up the deployment with a custom build script</li>
|
|
<li>Every document is built into a PDF, and packaged with a directory listing generated by <a rel="noopener" target="_blank" href="http://mama.indstate.edu/users/ice/tree/tree.1.html#XML/JSON/HTML%20OPTIONS"><code>tree -H</code></a></li>
|
|
<li>Everything is pushed to a subdomain on my website via GitHub pages</li>
|
|
<li>I can share documents via URL to anyone</li>
|
|
</ol>
|
|
<p>This is almost entirely accomplished by a shell script and a custom CI script.</p>
|
|
<script src="https://gist.github.com/Ewpratten/4a69af01250291eb2981510feddef642.js"></script>
|
|
<hr />
|
|
<p>If you have any questions about this system, want me to write another post about it, or would like me to walk you through setting up a notes workspace of your own, <a href="/about">contact me</a></p>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/styles/components/footer.css">
|
|
|
|
|
|
<div class="footer">
|
|
<br>
|
|
<span class="gray">-- EOF --</span>
|
|
<p>
|
|
Site design & content by: <a href="/contact">Evan Pratten</a><br>
|
|
Consider <a href="/donate" target="_blank">supporting my work</a> if you like what you see<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-5912H4H03P"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() { dataLayer.push(arguments); }
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-5912H4H03P');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |