linkCode Top Bar

Code snippets can have a top-bar which resembles a generic window manager top-bar and can host file names. This is to enhance the familiarity of code-snippets, increasing their learnability and encouraging readers to try them more actively. Additionally, the filename and extension can help readers quickly identify the language of the snippet and where it would appear in their own project.

By default, any code snippet with more than one line of code will have this bar. You can set the name of the file like this:

1link```sql | DB/migrations/some-migration.sql

2linkcreate table dbo.PersonData

3link    (

4link      id                         int identity(1, 1) ,

5link      Name                       nvarchar(200) not null ,

6link      Email                      nvarchar(200) null ,

7link      Phone                      nvarchar(100) null ,

8link      Street                     nvarchar(200) null ,

9link      City                       nvarchar(200) null ,

10link      StateProvince              nvarchar(50) null ,

11link      PostalCode                 nvarchar(50) null ,

12link      constraint PK_PersonDataID primary key ( id )

13link    );

14link```

DB/migrations/some-migration.sql
1linkcreate table dbo.PersonData

2link    (

3link      id                         int identity(1, 1) ,

4link      Name                       nvarchar(200) not null ,

5link      Email                      nvarchar(200) null ,

6link      Phone                      nvarchar(100) null ,

7link      Street                     nvarchar(200) null ,

8link      City                       nvarchar(200) null ,

9link      StateProvince              nvarchar(50) null ,

10link      PostalCode                 nvarchar(50) null ,

11link      constraint PK_PersonDataID primary key ( id )

12link    );

linkDisabling the Top Bar

You can disable the top-bar via .codedoc/theme.ts:

.codedoc/theme.ts
1linkimport { createTheme } from '@codedoc/core/transport';

2link

3link

4linkexport const theme = /*#__PURE__*/createTheme({

5link  // ...

6link  code: {

7link    wmbar: false,                          // --> disable the top-bar by default

8link  },

9link});

Note that the top-bar will still appear for any snippet that has a file name.

linkDisabling/Enabling per Snippet

You can also enable/disable the top-bar on a per-snippet basis. Regardless of the theme settings:

• Any snippet with a filename will have a top-bar
• Any snippet with --wmbar flag will have a top-bar (but not necessarily a filename)
• Any snippet with --no-wmbar flag will NOT have a top-bar. When both a file name and the --no-wmbar flag are provided:
  • If the filename comes first, no top-bar is shown
  • If the flag comes first, then the top-bar is shown
• No one-liner snippet will ever have a top-bar (even with the flags and filename)

1link```js | --wmbar

2link// --> lets add a comment so this snippet is two lines

3linkconsole.log('HALO!');

4link```

1link// --> lets add a comment so this snippet is two lines

2linkconsole.log('HALO!');

1link```js | whatever.js | --no-wmbar 

2link// --> lets add a comment so this snippet is two lines

3linkconsole.log('HALO!');

4link```

whatever.js
1link// --> lets add a comment so this snippet is two lines

2linkconsole.log('HALO!');