malcolmkee.com
Source code for Malcolm Kee's personal site and workshop materials.
Workshop materials:
Code Snippet MDX Usage
This site is powered by gatsby-mdx
, which enable the code editor in the markdown.
Live code editor mode will be enabled for two cases:
- the language is
js
(javascript
will not be live code editor). - the language is
jsx
with proplive
The props can be provided like this:
```jsx live fileName=src/example.js
() => <h1>Hello world!</h1>
```
The following props are supported:
fileName
: add fileName above the code snippet. Handy to indicate which file you're working on.noWrapper
: remove the wrapper around code snippet. This is to remove the clutter.highlightedLines
: comma-separated line numbers to be highlighted. This is not recommended if you can use special comments below, but some languages doesn't support comment (like JSON).
Only applicable for language jsx
:
live
: make the code live editor.noInline
: make the render of component requires the call ofrender
. This is actually props ofreact-live
.
Highlight Code
In addition, if the code snippets are not rendered as live code editor, you can highlight specific lines with the following special comments:
- highlight-next-line
- highlight-start
- highlight-end
- hightlight-line
Local Build Time Optimization
It's possible to disable specific pages to optimize local build time by adding the following variables to a env.development
file:
DISABLE_BLOG=true
ONLY_LAST_TEN_BLOGS=true
DISABLE_WORKSHOP=true
ONLY_WORKSHOP=intro-to-react-js-v2 # content id of workshop