Design

List of supported components (Notion Blocks)

Headings

Headings help users and search engines to read and understand text.

Heading 1

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Heading 2

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Heading 3

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Headings

Allows you to create collapsible blocks with a large heading

Toggle Heading 1

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Heading 2

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Heading 3

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Paragraph

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Another one Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Bold

This is a bold text

Italic

This is an italicized text

Underline

This is an underlined text

Strikethrough

This text has a strikethrough

Code

This text is displayed as code

Inline Equation

Mass–energy equivalence:

Here's is a link to my GitHub

Comments

This text has a comment

Colors

default gray brown orange yellow green blue purple pink red gray_background brown_background orange_background yellow_background green_background blue_background purple_background pink_background red_background

Useful for highlighting important stuff that need the most attention.

Block Color

Text color of this block is blue

Background color of this block is blue

Nested Text

At level one

At level 2

  • A list on level 2

<script>alert('xss');</script>

Horizontal Rule

The HTML <hr> element is for creating a "thematic break" between paragraph-level elements.


Blockquote

Come on, baby! Do the magic hand thing” — Greef Karga

Lists

Unordered List

  • Item 1
  • Item 2 Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    • this is a nested list
      • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Item 3

Ordered List

  1. Item 1
  2. Item 2 Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    1. Item 2.1
      1. ltem 2.1.i
  3. Item 3

To-do List

Toggle List

Summary


Details Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

With other types of blocks


  • Bulleted in toggle
  1. Numbered in toggle

Toggle in toggle!


tada 🎉

With long text (and no contents) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


This block is empty

Callout

A callout with an emoji.
A callout with an uploaded image
A callout with a external image
Callout in callout. Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Block Equation

Here's the infamous Quadratic Formula for finding the roots of a Quadratic Equation

Mention

User: Lorem Ipsum Maximous Black is simply dummy text of the printing and typesetting industry

Page: Lorem Ipsum Maximous Black is simply dummy text of the printing and typesetting industry

GitHub:

Date:

  • simple:
  • range:
  • with time:
  • @today:
  • @Sunday:
  • Reminder:
Maximous Black

Sub Page

Sub Page

Simple Table

Unsupported block[table]

Database

Unsupported block[child_database]

Media

Image

Linked
Linked

Video

Linked (youtube)

Audio

Linked

PDF

Essay1977-Personal_Dynamic_Media-Alan_Kay_Adele_Goldberg.pdf
Personal Dynamic Media by Alan Kay, Adele Goldberg

File

test-tone.mp3
JetBrainsMono-2.242.zip
my favorite monospace font

Bookmarks

Maximous Black

I'm a Web Developer and occasional UI/UX Designer who loves making high-quality websites and applications. I'm still a student and preparing for college. I also love Physics, and I want to learn more about how the Universe works.

https://maximousblk.me/

My website

Deno for JavaScript Beginners - Maximous Black

So, you're trying to learn JavaScript. You have just gotten a bit fluent with JavaScript in the browser. Then all of a sudden, you come across Deno and the #NodeKiller hype. But you don't know what any of these are. If that's the case, read on!

https://maximousblk.me/posts/deno-for-javascript-beginners

The Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

https://ogp.me/

feat: use notion as the content source by maximousblk · Pull Request #241 · maximousblk/maximousblk.me · GitHub

preview: https://blog-git-notion-maximousblk.vercel.app/design

https://github.com/maximousblk/maximousblk.me/pull/241

Code Blocks

/* This is a comment. (link for more info) */
function foo() {
  const color = "bar"
  return color;
  console.log("dead code");
}

Template Button

Unsupported block[template]
Unsupported block[breadcrumb]

Synced Block

A "Container" block (a callout), let's call it A.

This is a synced block

A "Reference" block that is pasted after clicking "Copy and sync" in A, let's call it B.

This is a synced block

A "Reference" block that is pasted after clicking "Copy and sync" in B, let's call it C.

This is a synced block

Columns

3 column divide:

Column 1/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 2/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 3/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

2 column divide:

Pros

  • It's good
  • It's good
  • It's good

Cons

  • It's bad
  • It's bad
  • It's bad

Embeds

Unsupported block[embed]
Unsupported block[embed]