21

Polymath: A Markup Language for Everything

 4 years ago
source link: https://jwmza.com/polymath/?t=noon
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
## Create a main heading / title Polymath

If you're a curious type: maybe an academic, maybe a hacker, or a student—then Polymath is for you.

Polymath is a markup language (like Markdown, LaTeX, or HTML) and a static site generator specialized in aesthetically presenting a wide variety of information: text, mathematics, code, photos, videos, you name it.

pp Create a text paragraph If you're a curious type: maybe an academic,
  maybe a hacker, or a student------ Long em-dashthen
  {bb Bolded text Polymath} is for you.
  
  Indenting after an empty row with no block-type makes a paragraph Polymath is a markup language (like Markdown,
  LaTeX, or HTML) and a static site generator
  specialized in aesthetically presenting a wide
  variety of information: text, mathematics,
  code, photos, videos, you name it.

For example, you can easily typeset \(\TeX\)-based equations and scientific expressions both inline and in the beautiful display style, as shown below:

\[ \mathcal A (u) = \int_\Omega \left(1+|\nabla u|^2\right)^{1/2} dx_1,\ldots,dx_n \]

p For example, you can easily typeset {xx Create inline TeX \TeX}-
  based equations and scientific expressions both
  inline and in the beautiful display style, as
  shown below:

XX Create display-style TeX \mathcal A (u) = \int_\Omega \left(1+|\nabla u|^2
  \right)^{1/2} dx_1,\ldots,dx_n

You can also insert images with captions, like this photo I took in Switzerland:

swissalps1.jpg

Swiss Alps, 2017. Note that captions, rounded corners, and other optional parameters can be set inside a parentheses-enclosed JSON-like dictionary following the block type identifier.

______ Create a divider

p You can also insert images with captions, like
  this photo I took in Switzerland:

MM Insert media, such as an image(url: swissalps1.jpg,
  caption: "Swiss Alps, 2017. Note that captions,
    rounded corners, and other optional parameters
    can be set inside a square- bracket list
    following the block type identifier.",
  corners: 4px)

Tables

Tables work like TeX matrices and you can format cells 123 \(\sum_i U_i\) Polymath
#### Create a second level heading / subtitle Tables

TT Create a table Tables && Column separator work    & like    & TeX    & matrices
  \\ and & {ii Italicized text you} & {b can} & format & {uu Underlined text cells}
  \\\\ Row separator 123 & {x \sum_i U_i} & {aa Create a link/anchor() Polymath}

About

Here's a block quote:

Polymath was created byme, to support my own personal website. Its purpose is to provide a simple, easy to use, yet exact language to create beautiful web pages for people who work in a variety of areas, including:

  • Mathematics, physics, chemistry etc...
  • Software / programming
  • Regular blogging—writing with text
  • Photography, videography, art etc...
  • Interactive media (e.g. data visualization)
## About

p Here's a block quote:

QQ Create a block quote
  p {b Polymath} was created by {a(/about) me}, to
    support my own personal website.
    Its purpose is to provide a simple, easy to
    use, yet exact language to create beautiful web
    pages for people who work in a variety of
    areas, including:
  
  -- Create an unordered list item Mathematics, physics, chemistry etc...
  - Software / programming
  - Regular blogging---writing with text
  - Photography, videography, art etc...
  - Interactive media (e.g. data visualization)

There are only a handful of core block types in Polymath, but parameters give you a deep control over customizing their behavior:

So you can

caracal.jpg

quantum.jpg do cool stuff

just

tetralogic.jpg

escape.jpg like this :)

---

p There are only a handful of core block types in
  Polymath, but parameters give you a deep control
  over customizing their behavior:

GG Create a grid block(cols: 4, flow: column, gap: 30px)

  @@ Set local parameters for specific block typeM(corners: 100%; shadow: small;)

  {{cc Centered text So you can}{}
   {M(/portfolio/switzerland/caracal.jpg)}}

  {{M(/portfolio/switzerland/quantum.jpg)}
   {}{c do cool stuff}}

  {{c just like}{}
   {M(/portfolio/switzerland/tetralogic.jpg)}}

  {{M(/portfolio/switzerland/escape.jpg)}
   {}{c this}}

Keep updated:

Get early access to Polymath   ->

Okay, that's the demo

The core mission of Polymath is to provide a markup language that is:

  • General: works for any information type, on any platform
  • Aesthetic: handles the typesetting for you, so you can focus on content
  • Human-readable: only looks like code when the information is code
  • Long term: will work today, and in 100 years time
  • Interoperable: works with industry standards like \(\TeX\)

I won't keep showing the source to the right hand side, but by now you should be getting a feel for the structure of Polymath . The full thing isn't done yet—I only started this particular project in January 2020, building on the new design formy personal site I built in December 2019, the old version from 2018, and the EdTech web platform I created from 2015-2017 which provided STEM-subject study materials to International Baccalaureate students.

Developing the language and intrepreters will take a considerable chunk of time and effort, I'm sure, but I will be taking a very iterative approach this time and hopefully it will pay for itself in terms of saved time writing essays and other posts on this website within several months.

The only third-party components so far are the \(\KaTeX\) rendering engine which generates beautiful and insanely performant HTML/CSS components from \(\TeX\) expressions – it is much, much faster than MathJax, which seems to be by far the most common; and Rainbow , a JS syntax highlighting library, although I may replace this with a native one to support languages like Polymath itself.

Also, Polymath is fast . The current version generates my entire website in just about 50-75 milliseconds—going through roughly 200 files.

Plans

It's likely that there will be two core components to the Polymath software:

  1. An ‘open-source’ markup language, which you may use and build software for if you like.
  2. A paid (either once-off or annual subscription) static site generator service, to fund the upkeep and development of the software. This would definitely be very affordable, because I'd like to make a really great product that any math professor or CS student or young artist can use if they want a great SSG for beautiful, performant websites.

...and one more thing!

Of course, there is plenty of functionality for code , with great syntax highlighting for languages like JavaScript HTML CSS Python Haskell and more (you can still do regular monospaced text too):

<code data-language="javascript">/*
 * This uses Fira Code, a great monospace font.
 */
function classToggleIDs( x, y, z ) {

    document.getElementById( x ).addEventListener(
        "click",
        () => {
            let A = document.getElementById( y ).classList;
            A.contains( z ) ? A.remove( z ) : A.add( z );
        }
    );}</code>
<code data-language="css">/* Styling code */

pre {   background-color:   var(--bg-main)
    ;          word-wrap:   break-word
    ;             margin:   0px
    ;              color:   var(--main)
    ;      margin-bottom:   20px
    ;          font-size:   80%
    }

pre code {       display:   block
         ;        border:   1px solid rgba(136,136,136,0.25)
         ;    border-top:   1px solid rgba(128,128,128,0.3)
         ; border-bottom:   1px solid rgba(144,144,144,0.2)
         }</code>
<code data-language="python"># import numpy
import numpy as np

def f ( x ):
    return x*(x-2)*(x-3)

def f_prime ( x ):
    # df/dx
    return 3*x*x - 10*x + 6
</code>
<code data-language="html"><!-- a comment -->
<head>
    <title>My webpage</title>
    <link type='text/css' rel='stylesheet' href='/css.css'>
    <style>
      .class {
        display: none;
        font-size: 48px;
      }
    </style>
</head>
<body class='class'>
    Hello
    <script>
        document.getElementsByClassName('class')[0].innerHTML += ' world!'
    </script>
</body></code>
<code data-language="json">{
  "type": "person",
  "name": {
    "prefix": {
      "full": "Mister",
      "short": "Mr."
    },
    "first": "Steven",
    "middle": [
      "Paul"
    ],
    "last": "Jobs",
    "suffix": []
  },
  "born": {
    "date": {
      "epoch": -468650637,
      "holo": {
        "year": 11955,
        "month": "February",
        "day": 24,
        "gmt": 26163
      }
    }
  }
}</code>
<code data-language="haskell">integration :: (Double -> Double) -> Double -> Double -> Double
integration f a b = h * (f a + f b + innerSum) / 2
    where 
        h = (b - a) / 1000 
        innerPts  = map ((2*) . f . (a+)) (points (1000-1) h) 
        innerSum = sum innerPts

points  :: Double -> Double -> [Double]
points i x 
    | i <= 0 = []
    | otherwise = (i*x) : points (i-1) x</code>
<code data-language="shell">aws s3 cp /res/img215.jpg "s3:\\ex.com\photos\"
</code>

Keep updated:

I'll let you know when any important updates or early-access programs begin :)

Get early access to Polymath   ->

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK