1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93

Macana uses [micromark](https://github.com/micromark/micromark) and [mdast](https://github.com/syntax-tree/mdast) utilities for basic Markdown parsing.
Those libraries are based on [CommonMark](https://commonmark.org/), a de-facto standard of Markdown syntax.
Because of that, you can expect Macana to correctly render CommonMark syntax otherwise overridden by extensions.

- [CommonMark Spec](https://spec.commonmark.org/0.31.2/) (v0.31.2)

As the number of syntax element is large, this page only lists additional behavior and restrictions performed by Macana.

## Heading levels

Since Macana uses a file name or `title` YAML frontmatter field for `<h1>`, you should avoid using level 1 heading in your Markdown files.

> [!info]
> There is a plan for adding an option to down-level headings in a future.
> See [[Roadmap]] for more info.

## Syntax highlighting

Add language name as a first word of [info string](https://spec.commonmark.org/0.31.2/#info-string) for a [fenced code block](https://spec.commonmark.org/0.31.2/#fenced-code-blocks) to add syntax highlighting to the code block.
Macana uses [refractor](https://github.com/wooorm/refractor) as a syntax highlight engine.

> [!info]
> Style customization is not supported yet.

~~~markdown
Snippet from JSONCanvas renderer.

```tsx
function textNode({ node }: TextNodeProps) {
	const containerStyle: StyleConstructor = {
		width: node.width,
		height: node.height,
	};

	// NOTE: Safari can't render `<foreignObject>` correctly.
	// In this case, Safari renders an overflowing element at completely incorrect
	// position and size, which makes the element invisible (outside viewport).
	// https://github.com/mdn/content/issues/1319
	// https://bugs.webkit.org/show_bug.cgi?id=90738
	// https://bugs.webkit.org/show_bug.cgi?id=23113
	return (
		<foreignObject
			x={node.x}
			y={node.y}
			width={node.width}
			height={node.height}
		>
			<div
				xmlns="http://www.w3.org/1999/xhtml"
				style={constructStyle(containerStyle)}
				class={c.embed}
			>
				{node.text}
			</div>
		</foreignObject>
	);
}
```
~~~

Snippet from JSONCanvas renderer.

```tsx
function textNode({ node }: TextNodeProps) {
	const containerStyle: StyleConstructor = {
		width: node.width,
		height: node.height,
	};

	// NOTE: Safari can't render `<foreignObject>` correctly.
	// In this case, Safari renders an overflowing element at completely incorrect
	// position and size, which makes the element invisible (outside viewport).
	// https://github.com/mdn/content/issues/1319
	// https://bugs.webkit.org/show_bug.cgi?id=90738
	// https://bugs.webkit.org/show_bug.cgi?id=23113
	return (
		<foreignObject
			x={node.x}
			y={node.y}
			width={node.width}
			height={node.height}
		>
			<div
				xmlns="http://www.w3.org/1999/xhtml"
				style={constructStyle(containerStyle)}
				class={c.embed}
			>
				{node.text}
			</div>
		</foreignObject>
	);
}
```