Fantastic Beasts and Where to Find Them

01.11.2019 — Novel — 1 min read

Here will a React component go:

Here will a live code example go:

Here will a normal code block go:

1(function() {
2
3var cache = {};
4var form = $('form');
5var minified = true;
6
7var dependencies = {};
8
9var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
10var treePromise = new Promise(function(resolve) {
11    $u.xhr({
12        url: treeURL,
13        callback: function(xhr) {
14            if (xhr.status < 400) {
15                resolve(JSON.parse(xhr.responseText).tree);
16            }
17        }
18    });
19});

A code block with a JSDoc comment, short, and long comment:

1/**
2 * Get value out of string (e.g. rem => px)
3 * If value is px strip the px part
4 * If the input is already a number only return that value
5 * @param {string | number} input
6 * @param {number} [rootFontSize]
7 * @return {number} Number without last three characters
8 * @example removeLastThree('6rem') => 6
9 */
10const getValue = (input, rootFontSize = 16) => {
11  if (typeof input === `number`) {
12    return input / rootFontSize;
13  }
14
15  const isPxValue = input.slice(-2) === `px`;
16
17  if (isPxValue) {
18    return parseFloat(input.slice(0, -2));
19  }
20
21  return parseFloat(input.slice(0, -3));
22};
23
24// This is a little helper function
25const helper = (a, b) => a + b;
26
27// This is also a little helper function but this time with a really long one-line comment that should show some more details
28const morehelper = (a, b) => a * b;
29
30export { getValue, helper, morehelper };

Normal block without language:

1import Test from "../components/test"
2
3const Layout = ({ children }) => (
4  <Test>
5    {children}
6  </Test>
7)
8
9export default Layout

Code block with code highlighting:

src/components/post.jsx

1import * as React from "react";
2
3const Post = ({ data: { post } }) => (
4  <Layout>
5    <Heading variant="h2" as="h2">
6      {post.title}
7    </Heading>
8    <p
9      sx={{
10        color: `secondary`,
11        mt: 3,
12        a: { color: `secondary` },
13        fontSize: [1, 1, 2],
14      }}
15    >
16      <span>{post.date}</span>
17      {post.tags && (
18        <React.Fragment>
19          {` — `}
20          <ItemTags tags={post.tags} />
21        </React.Fragment>
22      )}
23    </p>
24    <section
25      sx={{
26        ...CodeStyles,
27        my: 5,
28        ".gatsby-resp-image-wrapper": { my: 5, boxShadow: `lg` },
29      }}
30    >
31      <MDXRenderer>{post.body}</MDXRenderer>
32    </section>
33  </Layout>
34);
35
36export default Post;

Code block without title:

1Harry Potter and the Philosopher's Stone

Code block without lineNumbers (but lang):

Harry Potter and the Chamber of Secrets

Code block without lineNumbers (and without lang):

Harry Potter and the Chamber of Secrets

Code block with only the title:

src/utils/scream.js

1const scream = (input) => window.alert(input)

Code block with only the title but without lineNumbers:

src/utils/scream.js

const scream = (input) => window.alert(input)

Line highlighting without code title:

1const test = 3;
2const foo = "bar";
3const harry = "potter";
4const hermione = "granger";
5const ron = "weasley";

Here will inline code go, just inside the text. Wow!

Code block without line numbers but with highlighting, language, and title:

src/components/blog.tsx

import * as React from "react";

const Blog = ({ posts }: PostsProps) => {
  const { tagsPath, basePath } = useSiteMetadata();

  return (
    <Layout>
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
        <Heading variant="h2" as="h2">
          Blog
        </Heading>
        <Styled.a
          as={Link}
          sx={{ variant: `links.secondary` }}
          to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
        >
          View all tags
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  );
};

export default Blog;

Example text

1data "azurerm_subnet" "subnet" {
2  resource_group_name  = var.existing_snet_info.snet_resource_grp
3  virtual_network_name = var.existing_snet_info.virtual_network_name
4  name                 = var.existing_snet_info.snet_name
5}
6
7data "azurerm_resource_group" "rg" {
8  name = var.vm_params.existing_resource_group
9}
10
11resource "azurerm_network_interface" "nic" {
12  for_each                      = var.vm_list
13  name                          = "${each.value.vmname}-nic"
14  location                      = data.azurerm_resource_group.rg.location
15  resource_group_name           = data.azurerm_resource_group.rg.name
16  enable_accelerated_networking = false
17
18  ip_configuration {
19    name                          = "IPConfig1"
20    subnet_id                     = data.azurerm_subnet.subnet.id
21    private_ip_address            = cidrhost(data.azurerm_subnet.subnet.address_prefixes[0], each.value.ip_offset)
22    private_ip_address_allocation = "static"
23  }
24}
25
26resource "azurerm_linux_virtual_machine" "vm" {
27  for_each                        = var.vm_list
28  name                            = each.value.vmname
29  resource_group_name             = data.azurerm_resource_group.rg.name
30  location                        = data.azurerm_resource_group.rg.location
31  size                            = each.value.vmsku
32  admin_username                  = each.value.admin_username
33  admin_password                  = each.value.admin_password
34  disable_password_authentication = false
35  network_interface_ids = [
36    azurerm_network_interface.nic[each.key].id
37  ]
38
39  source_image_reference {
40    publisher = var.vm_params.source_image_reference.publisher
41    offer     = var.vm_params.source_image_reference.offer
42    sku       = var.vm_params.source_image_reference.sku
43    version   = var.vm_params.source_image_reference.version
44  }
45
46  os_disk {
47    storage_account_type = "Premium_LRS" ## Change to Premium for Production
48    caching              = "ReadWrite"
49  }
50}
51
52
53locals {
54  ## This creates a tuple object with disk info for each VM created above
55  vm_disks = flatten([
56    for grpkeys, grpvals in azurerm_linux_virtual_machine.vm : [
57      for grps, rules in var.vm_list : [
58        for dskid, disk_parms in rules.data_disks : {
59          "vmname" = rules.vmname
60          "vm_id"  = grpvals.id
61          ## Derive and add a diskname from vmname and disk key from the var.vm_list
62          "disk_config" = merge(disk_parms, { "diskname" = "${rules.vmname}-${dskid}" })
63        } if rules.vmname == grpvals.name
64      ]
65    ]
66  ])
67  
68  ## This creates a map object with disk info from local.vmdisks
69  vm_disk_map = { for items in local.vm_disks : items.disk_config.diskname => items }
70
71  disk_to_vm_map = flatten([
72    for grpkeys, grpvals in local.vm_disk_map : [
73      for key, vals in azurerm_managed_disk.disks : {
74        "vm_id"     = grpvals.vm_id
75        "vmname"    = grpvals.vmname
76        "disk_id"   = vals.id
77        "disk_name" = grpvals.disk_config.diskname
78        "lun_id"    = grpvals.disk_config.lun
79       ## "write_accelaration" = try(grpvals.disk_config.write_accelaration, false)
80        "caching"   = try(grpvals.disk_config.caching != null && grpvals.disk_config.caching != "" ? grpvals.disk_config.caching : "ReadWrite", "")
81      } if grpvals.disk_config.diskname == key
82    ]
83  ])
84}
85
86resource "azurerm_managed_disk" "disks" {
87  for_each             = local.vm_disk_map
88  name                 = each.value.disk_config.diskname
89  location             = data.azurerm_resource_group.rg.location
90  resource_group_name  = data.azurerm_resource_group.rg.name
91  create_option        = try(each.value.create_option, "Empty")
92  storage_account_type = each.value.disk_config.storage_account_type
93  disk_size_gb         = each.value.disk_config.disk_size_gb
94}
95
96resource "azurerm_virtual_machine_data_disk_attachment" "attach" {
97  for_each                  = { for items in local.disk_to_vm_map : items.disk_name => items }
98  managed_disk_id           = each.value.disk_id
99  virtual_machine_id        = each.value.vm_id
100  caching                   = try(each.value.caching, "ReadWrite")
101  write_accelerator_enabled = try(each.value.write_accelaration, false)
102  lun                       = each.value.lun_id
103}

This is powershell

1$WebClient = New-Object System.Net.WebClient
2$WebClient.DownloadFile("https://www.contoso.com/file","C:\path\file")

This is Shell Script

1Powerline glyphs:
2Code points Glyphe  Description                Old code point
3U+E0A0             Version control branch     (U+2B60 ⭠ )
4U+E0A1             LN (line) symbol           (U+2B61 ⭡ )
5U+E0A2             Closed padlock             (U+2B64 ⭤ )
6U+E0B0             Rightwards black arrowhead (U+2B80 ⮀ )
7U+E0B1             Rightwards arrowhead       (U+2B81 ⮁ )
8U+E0B2             Leftwards black arrowhead  (U+2B82 ⮂ )
9U+E0B3             Leftwards arrowhead        (U+2B83 ⮃ )
10~/kalyan-blog   main ±  gatsby develop --host=0.0.0.0