Sections not rendering when using preview
I copied the the example form the site, which look great there, and pasted it into vs code. I get all the events but the sections do not show.
Here is the example I'm referring to:
`
title: Welcome to Markwhen!
edit:
view: *
#Project1: #d336b1
Welcome #welcome
style: section timeline: style: fill: white fill-opacity: 0.1 stroke-opacity: 0 hover: fill: red fill-opacity: 0.2 now: This example timeline showcases some of markwhen's features.
now: For more information, view the documentation here or join the discord #welcome
now: Note that changes you make here are not saved If you want to make a new markwhen you should open a tab at the bottom or click open in the sidebar
All Projects
style: section
Project 1 #Project1
// Supports ISO8601
2023-01/2023-03: Sub task #John
2023-03/2023-06: Sub task 2 #Michelle
More info about sub task 2
- [ ] We need to get this done
- [x] And this
- [ ] This one is extra
2023-07: Yearly planning
Project 2 #Project2
2023-04/4 months: Larger sub task #Danielle
// Supports American date formats
03/2023 - 1 year: Longer ongoing task #Michelle
- [x] Sub task 1
- [x] Sub task 2
- [ ] Sub task 3
- [ ] Sub task 4
- [ ] so many checkboxes omg
10/2023 - 2 months: Holiday season
Project 3
01/2024: Project kickoff
02/2024-04/2024: Other stuff
2023-01-03 every 2 weeks for 1 year: Biweekly meeting
// Events that don't have explicit end dates have inferred ranges - for example, when a year is specified, it lasts from the beginning of that year to the end of it. 2024: A year-long event
// Inferred ranges are as granular as their definitions. 09/2024: one month
2025-05-05: one day
Jan 4 2025 8am: instant
// You can also be specific with your ranges 2024/2025: An event that lasts two years
November 8, 2022 9am - November 9, 2023, 10am: one year, one day, and one hour
now: More documentation
// Event descriptions last from the date range definition up to the next event 2029-04-25/2029-05-03: Descriptions can be one line
2029-04-25/2029-05-03: Or they can span multiple lines
1/27/2025: [] An event can have a checkbox for completion Put square brackets at the start of the event description
1/27/2026: [x] To mark an event as completed, put an x in the square brackets
1/27/2027: Events can have lists
- checkbox list item
- a completed checkbox list item
- simple list item
- another simple list item
1/27/2028 - 1 year: 68% Manually indicate an event's completion with a percentage in the description
Partially completed events will have their event bar partially filled that amount
1 year: Links are markdown-style: This is a link
1 year: Images are also markdown-style:
1 year: Locations (which are more useful for the map view) can be indicated in a similar way: Hawaii Alaska
2024: Refer to other markwhen documents with @ syntax: @rob
1/27/2024: Happy birthday 2020-03: Covid started in the US
Group with title
Feb 2 2025: Interviewing Feb 8 2025: Write report Feb 19 2025: Presentation
Groups can contain other groups #big
Smaller plan #small #nested
1 year: Accomplish something
2 years: Accomplish something else
1 year: Things are accomplished
Sections extend across the screen
style: section
2023: Start year
Nested section #nested
style: section
2025: End year
// Specify tag colors in the header (before any event) #Timeline: #abf
now: Events and groups can have tags
Feb 18 1999: back in the day #Past #The90s 2043: in the future #TheOther90s
2025: Event
1 year: This event happens immediately after the previous event and lasts for 1 year
#after
3 months - 1 month: This event happens 3 months after the previous event and lasts for 1 month #after
by 2 weeks - 1 month: This event happens 2 weeks before the previous event and lasts 1 month #before
2023: Event !base
after !base 1 year - 1 month: This event happens 1 year after the event with with id base and lasts for 1 month
#after
before !base 1 week day - 1 hour: This event happens 1 week day before the event with id base and lasts 1 hour
#before
October 7, 1989 every year for 10 years: ... 2025-03-04 every week for 12 weeks: ... Feb 1 2023 every 6 months for 10 times: ...
// Visually indicate that an event is an era or milestone with the tag #era or #milestone
2023-06-01/2023-08-20: Summer time #vacation
2023-08-21/2023-12-17: Back to school
2023-12-18/2024-01-05: Winter break #vacation #milestone
2024-01-08/2024-05-31: Back to school
2024-05-27/2024-05-31: Final project due #milestone
`
Source: mark-when/vscode