Welcome to our styling guide!

I’m excited to share the collection of styling templates for the Data Science workbook. To keep everything looking sharp and unified, we’d love for all our contributors to stick to these guidelines when crafting their content. Doing so helps us maintain a cohesive look and feel throughout, making the workbook not only more professional but also more engaging for everyone involved. Thanks for helping us keep things looking great!

How It Works & Getting Started

This document is designed to empower your content creation with a suite of styling tools. Here’s what you’ll find inside and how to make the most of it:

feature	description	purpose
Standardized Color Coding	To ensure consistency throughout the workbook, I’ve implemented standardized color-coding.	This helps in maintaining a cohesive look and encourages a visually intuitive learning environment.
Component Templates	I’ve curated a selection of templates styled with front-end `Markdown` or back-end `CSS`, encapsulated within `HTML` components.	These are not just for looks; they serve as a learning aid, making the information more accessible and engaging for users.
Raw Code Blocks	For each styled component, you can find the corresponding raw code blocks.	This means you can quickly locate the styling you need, *copy-and-paste* it directly into your tutorial. It’s all about efficiency and ease of use.
Customization Options	Many templates are built to accommodate more sophisticated customization.	This flexibility allows for adjusting templates to fit the desired appearance and functionality of your content.
Interactive Elements	To make learning more engaging, some templates include interactive elements.	These range from hover effects to complex interactions, improving user experience with better organized, on-click content presentation.
Accessibility Features	Guidelines are provided to ensure content accessibility for everyone.	This ensures that your content is not only beautiful but also accessible to users with diverse needs.

text (font) colors

Markdown doesn’t support text coloring, but you can easily apply colors using CSS styling. This involves wrapping your text in simple HTML tags like , , 

code	description	preview
`<span> text </span>`	default: inline normal	text
`<em> text </em>`	default: inline italic	text
`<p> text </p>`	default: new paragraph	text

* all of these HTML components require closing tags: , , 

To apply colors:

add a class attribute to these tags,
where the value is a string of selected class names, e.g., “c-bad”.

  <span class="c-bad"> text </span>
  <em class="c-bad"> text </em>
  <p class="c-bad"> text </p>

preview:
text text

text

In your tutorial you can use it like this:

  The font can be changed to <span class="c-good"> green text </span> or
  <em class="c-bad"> red italic </em> using these HTML tags.

preview:
The font can be changed to green text or red italic using these HTML tags.

  <em class="c-alert"><b>NOTE:</b> Before starting this tutorial, ensure you meet a few necessary requirements. </em>

NOTE: Before starting this tutorial, ensure you meet a few necessary requirements.

Below is a list of class names designed to standardize font colors across the workbook:

class name	preview	syntax	usage
`c-bad`	text	`<span class="c-bad"> text </span>`	`Good News`, `Pros/Advantages`, `Success Messages`, `Positive Feedback`
`c-good`	text	`<span class="c-good"> text </span>`	`Bad News`, `Cons/Disadvantages`, `Error Messages`, `Warnings/Alerts`
`c-gray`	text	`<span class="c-gray"> text </span>`	`quotation`, `text placeholder`, `disabled options`, `gray out the text`
`c-header`	text	`<span class="c-header"> text </span>`	important section that will be highlighted in the table of contents
`c-alert`	text	`<span class="c-alert"> text </span>`	`notifications`, `announcements`, `user alerts`
`c-exercise`	text	`<span class="c-exercise"> text </span>`	headers for `exercises` that will be highlighted in the table of contents

TOC highlighted section :

You can change the color of a section title by applying one of the predefined color classes, which will also reflect in the Table of Contents. This approach is a strategic way to underscore section significance, ensuring it’s both eye-catching and readily noticeable to readers. To prevent overuse, it’s recommended to limit this approach to three specific scenarios:

- Important Section

see code example

Important Section

see code example

## <span class="c-header"> Important Section </span>

<h2 class="c-header"> Important Section </h2>

Important Section

see code example

<h2 class="c-header italic"> Important Section </h2>

Apply c-header color class for sections of special significance, as determined by your discretion.

- EXERCISE

see code example

EXERCISE

see code example

## span class="c-exercise"> EXERCISE </span>

<h2 class="c-exercise"> EXERCISE </h2>

EXERCISE

see code example

<h2 class="c-exercise italic"> EXERCISE </h2>

Mark exercises using c-exercise color class and the simple keyword EXERCISE.

- Coming Soon

see code example

Coming Soon

see code example

## <span class="c-alert"> Coming Soon </span>

<h2 class="c-alert"> Coming Soon </h2>

Coming Soon

see code example

<h2 class="c-alert italic"> Coming Soon </h2>

Use c-alert color class for temporary alerts with straightforward action keywords like “Coming Soon”, “Update Required”, “New Feature” or “Important Notice”. These tags and keywords ensure the content’s importance is immediately recognizable, enhancing the document’s overall effectiveness and user navigation.

background colors

Below is a list of class names designed to standardize background colors across the workbook:

class name	preview	syntax	usage
`bc-warning`	background	`<span class="bc-warning"> text </span>`	background of the warning color-coded box
`bc-protip`	background	`<span class="bc-protip"> text </span>`	background of the pro tip color-coded box
`bc-note`	background	`<span class="bc-note"> text </span>`	background of the note color-coded box
`bc-example`	background	`<span class="bc-example"> text </span>`	background of the example color-coded box
`bc-exercise`	background	`<span class="bc-exercise"> text </span>`	background of the exercise color-coded box
`bc-code`	background	`<span class="bc-code"> text </span>`	background imitating code blocks
`bc-data`	background	`<span class="bc-data"> text </span>`	example input data for coding exercises
`bc-template`	background	`<span class="bc-template"> text </span>`	templates for a user: checklists / docs, etc.
`bc-output`	background	`<span class="bc-output"> text </span>`	outputs from the command-line / terminal

Background color classes can be applied to:

- TEXT

within HTML tags like , , :

see code example (simple text)

Learn more about the basics of <em class="bc-note">programming in Python</em> by working through the <span class="bc-protip">hands-on tutorials.</span>

Learn more about the basics of programming in Python by working through the hands-on tutorials.

- BUTTONS

see code example (simple button)

Learn more about the basics of programming in <button class="btn bc-note">Python</button> by working through the <button class="btn bc-template">hands-on tutorials</button>.

Learn more about the basics of programming in by working through the .

see code example (useful standardized buttons)

<button class="btn" type="button">Download</button>
<button class="btn c-good">TUTORIAL</button>
<button class="btn c-alert">checklist</button>

see code example (buttons matching color-coded boxes)

<button class="btn protip"></button>
<button class="btn warning"></button>
<button class="btn note"></button>
<button class="btn example"></button>
<button class="btn exercise"></button>
<button class="btn more"></button>
<button class="btn required"></button>

- COLLAPSIBLE SECTIONS: See collapsible section

- COLOR-CODED BOXES: See section color-coded boxes

- CUSTOM BOXES

such as HTML tags <div> or <pre> or :

see code example (expected command line output)

<div class="bc-output">
<b class="c-header">abadacz</b>@MacBook(bash):<b class="c-good">data_wrangling</b><span class="c-bad">$</span> pwd <br>
/Users/abadacz/WORKDIR/data_wrangling
</div>

abadacz@MacBook(bash):data_wrangling$ pwd
/Users/abadacz/WORKDIR/data_wrangling

see code example (expected output annotation)

<pre class="output">
<b class="prompt-1"></b>
<b class="prompt-1"></b>print("Hello, world!")
Hello, world!
<b class="prompt-1"></b>
</pre>


print("Hello, world!")
Hello, world!

see code example (data preserving whitespace)

<pre class="bc-data">
label_1  982     0       0       0       0       0       1       0       0
label_1  983     0       0       0       0       0       1       0       0
label_1  984     0       0       0       0       0       1       0       0
</pre>

label_1  982     0       0       0       0       0       1       0       0
label_1  983     0       0       0       0       0       1       0       0
label_1  984     0       0       0       0       0       1       0       0

see code example (custom box with copyable content)

<code class="code-block bc-template"># Define a function that calculates the sum of two numbers
def add_numbers(x, y):
    return x + y
</code>

# Define a function that calculates the sum of two numbers def add_numbers(x, y): return x + y

* Ensure that your text begins on the same line as the opening <code> tag! Don’t forget to add the “code-block” class to include a copy button.

color-coded boxes

In creating tutorials, using color-coded templates like
, , , ,
can greatly enhance readability and comprehension by visually distinguishing different types of information. These templates are pre-styled with distinct background colors, appropriate headers, and default font styles, making each category instantly recognizable. Just place your text within this template and select class to utilize their unique styling.

<div class="protip" markdown="1">
text
</div>

* Please ensure that text is positioned on a new line, with the <div></div> tags on separate lines themselves. The markdown="1" attribute is optional and allows for the use of markdown syntax within the box.

Below is a list of class names designed to standardize color-coded boxes across the workbook:

class name	preview	usage
`protip`		Use for expert advice, quick solutions or common tricks to improve understanding or efficiency.
`warning`		Alert users to potential pitfalls or important considerations.
`note`		Highlight important terms, established knowledge or additional information.
`example`		Provide real-life or hypothetical scenarios to illustrate concepts.
`exercise`		Offer practical (coding) activities or questions for users to apply what they’ve learned.

see code example

<div class="protip" markdown="1">
*The window can be resized with the mouse and the font text can be increased by pressing* `cmd +` *or* `ctrl +` *on Mac or Windows/Linux, respectively.*
</div>

The window can be resized with the mouse and the font text can be increased by pressing cmd + or ctrl + on Mac or Windows/Linux, respectively.

see example code

<div class="warning" markdown="1">
*Note that* `~` *refers to the* `$HOME` *of a given user and* `/` *refers to the root directory in the file system! <br> You can **replace it with a path** to any location.*
</div>

Note that ~ refers to the $HOME of a given user and / refers to the root directory in the file system!
You can replace it with a path to any location.

see example code

<div class="note" markdown="1">
*Linux is open-source operating system, free to download and use, which makes it an attractive option for individuals and organizations on a budget. Here are some of the benefits of using Linux:*
</div>

Linux is open-source operating system, free to download and use, which makes it an attractive option for individuals and organizations on a budget. Here are some of the benefits of using Linux:

see example code

<div class="example">
# Python-based ScatterPlot
In this project, we will explore the use of:
* `matplotlib`, a Python data visualization library, to create a scatterplot
* `random` module of the `numpy` library, to generate a dataset for plotting, composed of 100 3-dimensional points.
</div>

# Python-based ScatterPlot
In this project, we will explore the use of:
* `matplotlib`, a Python data visualization library, to create a scatterplot
* `random` module of the `numpy` library, to generate a dataset for plotting, composed of 100 3-dimensional points.

* In this example, we deliberately omitted markdown="1" to show the raw Markdown syntax as text.
Including markdown="1" would allow kramdown to interpret and render the syntax.

see example code

<div class="exercise" markdown="1">
**Step 1: Identify Your Achievement** <br>
*Think about the most recent small achievement in your research work or personal life, especially something you’ve worked hard on or for a long time.*
</div>

Step 1: Identify Your Achievement
Think about the most recent small achievement in your research work or personal life, especially something you’ve worked hard on or for a long time.

see example code

<div class="more" markdown="1">
…about the Command Line text editors from the <button class="btn c-good">TUTORIAL</button> <a href="/03-command-line/02b-text-files-editors/" target="_blank" class="target-link">Command Line text files editors: nano, vim</a>, available in this workbook.
</div>

…about the Command Line text editors from the

, available in this workbook.

see example code

<div class="required" markdown="1">
Please note that this tutorial requires the user to have a basic understanding of the options available in Jupyter. If you are not familiar with Jupyter, we recommend exploring other tutorials in section <a href="/04-devel-environment/00-landing-page-devel-environment/" target="_blank" class="target-link">04. Development Environment</a> to get started:
* <a href="/04-devel-environment/01b-jupyter-basics/" target="_blank" class="target-link">Jupyter: interactive web-based multi-kernel DE</a>
  * <a href="/04-devel-environment/01c-jupyter-lab/" target="_blank" class="target-link">Getting started with JupyterLab</a>
  * <a href="/04-devel-environment/01d-jupyter-notebook/" target="_blank" class="target-link">Getting started with Jupyter Notebook on HPC systems</a>
</div>

Please note that this tutorial requires the user to have a basic understanding of the options available in Jupyter. If you are not familiar with Jupyter, we recommend exploring other tutorials in section

to get started:

Jupyter: interactive web-based multi-kernel DE
- Getting started with JupyterLab
- Getting started with Jupyter Notebook on HPC systems

custom box styling

The built-in styles include:

background color, box type title, default text color
italic style is automatically applied to , and box types.

For and types, italic font style can be forced by including the italic class.

see code example (text normal)

<div class="example" markdown="1">
The table outlines a concise example of setting and achieving SMART goals for a research project in agriculture.
</div>

The table outlines a concise example of setting and achieving SMART goals for a research project in agriculture.

see code example (text italic)

<div class="example italic" markdown="1">
The table outlines a concise example of setting and achieving SMART goals for a research project in agriculture.
</div>

The table outlines a concise example of setting and achieving SMART goals for a research project in agriculture.

text color

For a list of built-in classes defining available text colors, please refer to the section: Standardized Colors, where instructions for coloring specific text fragments are also provided.

If you wish to change the color of all content within a color box, you can apply the color class to the entire container as shown:

see code example (text default)

<div class="protip" markdown="1">
Due to incompatibilities between certain python libraries, it is highly recommended to manage python packages in virtual environments ( `conda` , `venv` or equivalent ), one environment per project.
</div>

Due to incompatibilities between certain python libraries, it is highly recommended to manage python packages in virtual environments ( conda , venv or equivalent ), one environment per project.

see code example (text color altered)

<div class="protip c-good" markdown="1">
Due to incompatibilities between certain python libraries, it is highly recommended to manage python packages in virtual environments ( `conda` , `venv` *or equivalent ), one environment per project.
</div>

Due to incompatibilities between certain python libraries, it is highly recommended to manage python packages in virtual environments ( conda , venv or equivalent ), one environment per project.

* This approach is not recommended as it undermines the purpose of unified, color-coded boxes.

box indentation

By default, color-coded boxes span 100% width, but you can adjust their indentation up to 3 levels to left-align with bullet points if desired.

see code example (normal position)

<div class="exercise" markdown="1">
**You've got this!** Reaching out for support is a brave and positive step. We're all in this together.
</div>

You’ve got this! Reaching out for support is a brave and positive step. We’re all in this together.

see code example (indentation level 1)

<div class="exercise level-1" markdown="1">
**You've got this!** Reaching out for support is a brave and positive step. We're all in this together.
</div>

example bullet point, class: level-1

You’ve got this! Reaching out for support is a brave and positive step. We’re all in this together.

example bullet point, class: level-2

You’ve got this! Reaching out for support is a brave and positive step. We’re all in this together.

example bullet point, class: level-3

You’ve got this! Reaching out for support is a brave and positive step. We’re all in this together.

custom box title

By default, each color-coded box comes with a built-in title, like or , which occupies some space but can be helpful for users by providing immediate context. This feature is designed for contributor convenience. Should your needs require altering or removing this title, it can be achieved with minimal customization.

- no title

If you prefer a color-coded box without a title, add before to the class attribute and include an additional data-before attribute set to an empty string ”“. This will remove the box title.

see code example (no box title)

<div class="exercise before" markdown="1" data-before="">
**Challenge:** You've got this! Reaching out for support is a brave and positive step. We're all in this together.
</div>

Challenge: You’ve got this! Reaching out for support is a brave and positive step. We’re all in this together.

- custom title

To customize the title of a color-coded box, add before to the class attribute and specify your custom text in the data-before attribute. This will replace the default box title with your text.

see code example (custom box title)

<div class="example before" markdown="1" data-before="Challenger Space Shuttle Disaster">
The Challenger disaster is a tragic example where ignoring potential risks had catastrophic consequences. The decision to launch despite concerns about the O-ring's performance in cold weather is a case study in the critical importance of heeding risk indicators in project decisions.
</div>

The Challenger disaster is a tragic example where ignoring potential risks had catastrophic consequences. The decision to launch despite concerns about the O-ring’s performance in cold weather is a case study in the critical importance of heeding risk indicators in project decisions.

pros & cons marks:

Pros and cons lists are crucial in tutorials as they provide a balanced overview, helping readers make informed decisions by clearly outlining the advantages and disadvantages of a particular tool, method, or concept. To facilitate this, built-in pros and cons classes are provided, supporting two main usage cases:

marker + independent text styling
By using an  or  tag without any text,
you incorporate a green or red marker, respectively. This is ideal when you wish to follow the marker with text using different styling, allowing for markdown styling in your text. It’s a flexible option for when you want to visually indicate pros and cons without affecting the styling of the text that follows.

see code example (marker + text with markdown styling, manual items spacing)

<em class="pros"></em> The notebook `.ipynb` is primarily designed for **interactive computing, data exploration, and rapid prototyping**, making it an excellent tool for tasks like data analysis, data visualization, and machine learning.

<em class="cons"></em> Some online notebook platforms **require a subscription or incur charges** for access to additional resources, which may be an issue for those working on a tight budget.

The notebook .ipynb is primarily designed for interactive computing, data exploration, and rapid prototyping, making it an excellent tool for tasks like data analysis, data visualization, and machine learning.

Some online notebook platforms require a subscription or incur charges for access to additional resources, which may be an issue for those working on a tight budget.

marker + plain text
Applying a class within  text  or  text  tags not only adds a green or red marker but also includes your text, prefixing your paragraph with this visual cue. This approach automatically spaces items for clarity. Markdown is not allowed for text styling, you should use plain text or combine HTML (tags like: , , , ) and CSS styling. It’s beneficial for creating simple lists or paragraphs where consistent spacing with no advanced styling are key.

see code example (marker + plain text, automatic items spacing)

<p class="pros"> You don't need an account or to sign in. Just open the jupyter-try and start using it! </p>
<p class="cons"> You can't install custom libraries. </p>

You don't need an account or to sign in. Just open the jupyter-try and start using it!

You can't install custom libraries.

custom spacing

Occasionally, customizing the spacing between built-in components can be beneficial. While the default settings are optimized for most scenarios, there might be instances where you want to add an extra line break for clarity or reduce the space for a more compact look. To accommodate these needs, several styling classes are available:

add extra space

component	effect	additional info
`<br>`	line break	works with both Markdown and HTML syntax; for a full-size empty line, simply add it twice:
`<base class="mb">`	line break with 0.5 line space below	useful if you want to add some space between paragraphs or html components
`<base class="mt">`	line break with 0.8 line space above	useful if you want to add some space between paragraphs or html components

MARKDOWN LIMITATIONS

You don't need an account or to sign in.
You can't install custom libraries.

1) Text is displayed inline: You don’t need an account or to sign in. You can’t install custom libraries.

You don't need an account or to sign in.

You can't install custom libraries.

2) Text is displayed with new line break: You don’t need an account or to sign in.

You can’t install custom libraries.

CUSTOM TEXT SPACING

You don't need an account or to sign in. <br> You can't install custom libraries.

Simple line break with   You don’t need an account or to sign in.
You can’t install custom libraries.

You don't need an account or to sign in. <br><br> You can't install custom libraries.

Full-line space with   You don’t need an account or to sign in.

You can’t install custom libraries.

**NumPy** is a Python library for numerical computing
that includes a random module for generating random numbers
and arrays. <base class="mb"> **Matplotlib** is a popular
data visualization library for Python. It provides a wide
range of tools for creating different types of plots.

Half-line space with <base class="mb"> NumPy is a Python library for numerical computing that includes a random module for generating random numbers and arrays. Matplotlib is a popular data visualization library for Python. It provides a wide range of tools for creating different types of plots.

```python
# Define a function that calculates the sum of two numbers
def add_numbers(x, y):
    return x + y
```
<base class="mt"> **C. Imported functions**

Mid-section break (1.5 line) with <base class="mt">

* add some extra space after code block for a new subsection

# Define a function that calculates the sum of two numbers
def add_numbers(x, y):
    return x + y

C. Imported functions

COMPONENTS SPACING

Color-coded boxes feature a 0.5 line margin on top and a 1.5 line margin at the bottom.

Reducing spacing becomes useful to enhance appearance when stacking multiple boxes, similar to when a box is the last element in a nested structure.
For adding more spacing, the solutions for spacing text (see subsection just above) can also be applied to other components with success.

<div class="exercise" markdown="1">
  **Step 1: Identify Your Achievement**
</div>
<div class="exercise" markdown="1">
  **Step 2: Reflect on Your Progress**
</div>

Default spacing between color-coded boxes

Step 1: Identify Your Achievement

Step 2: Reflect on Your Progress

<div class="exercise mb-0" markdown="1">
  **Step 1: Identify Your Achievement**
</div>
<div class="exercise" markdown="1">
  **Step 2: Reflect on Your Progress**
</div>

Reduced bottom spacing with class mb-0

Step 1: Identify Your Achievement

Step 2: Reflect on Your Progress

* there are also: mt-0 and mt- classes that set top margin to 0 and -0.8, respectively

<div class="exercise" markdown="1">
  **Step 1: Identify Your Achievement**
  <div class="protip mb-0 font-1" markdown="1">
    **Step 2: Reflect on Your Progress**
  </div>
</div>

Useful for nested boxes (box as the last element)

Step 1: Identify Your Achievement

Step 2: Reflect on Your Progress

* font-1 class keeps the same font size for nested boxes; font size is decreased otherwise

code

Embedding code snippets in tutorials provides practical examples, enhancing understanding and facilitating hands-on learning. In the workbook, several aspects of code presentation are automated, including:

code styling (font, background color, layout),
highlighting within code blocks based on the specified programming language,
a copy button for code blocks in the top-right corner,
and simple inline formatting for brief commands or options.

code-inline

Inline code in Markdown is used to format text as code within a sentence, making it highlighted for clarity. The syntax for inline code involves wrapping the text with backticks ` `, for example `text`, to format it as text within the flow of a sentence. Examples include using code syntax for:

short commands like git clone,
function names such as print(),
options like --verbose

Inline code in HTML-based components, like color-coded boxes, is possible when the markdown="1" attribute is included in the HTML tag.

<div class="exercise" markdown="1">
  Navigate to desired location using the `cd` command.
</div>

Preview:

Navigate to desired location using the cd command.

If this approach fails, employing the <code> tag with class="code-inline" ensures inline code rendering. In this case, the markdown="1" attribute is not required.

SYNTAX: <code class="code-inline"> text </code>

<div class="exercise">
  Navigate to desired location using the <code class="code-inline">cd</code> command.
</div>

Preview:

Navigate to desired location using the cd command.

Moreover, this method enables the presentation of raw Markdown syntax (including backticks) as inline code. This is particularly useful for explaining syntax, as demonstrated in this guide.

<div class="exercise">
The Markdown syntax for inline code involves wrapping the text with <u>backticks</u>
<code class="code-inline">` `</code>, for example <code class="code-inline">`text`</code>
</div>

Preview:

The Markdown syntax for inline code involves wrapping the text with backticks ` `, for example `text`

code-block

Code blocks in tutorials provide a clear and structured way to present complex code snippets, facilitating easier understanding and practical learning for the reader. The Markdown syntax for multiline code snippets involves enclosing the code between triple backticks ``` and optionally following the opening backticks with the programming language name to guide syntax highlighting by Rouge.

```bash
for i in 123; do
    echo $i
```

Rendering preview:

for i in 123; do
    echo $i

Displaying the raw Markdown syntax (left panel above) was achieved by encapsulating it within a pure HTML <code> tag, used with the class="code-block" to preserve and showcase the syntax accurately. This approach is useful for providing a guide on the exact code to be used, as it prevents immediate rendering of Markdown syntax, allowing users to see the code as it is. You can include Markdown syntax within the HTML <code> tag like this:
(ensuring it still renders as a code block in your tutorial)

<code class="code-block">```bash
for i in 123; do
    echo $i
```</code>

Rendering preview:

```bash
for i in 123; do
    echo $i
```

collapsible section

A collapsible element is a section that users can expand or collapse, which enhances clarity and visibility by allowing readers to control the amount of information displayed at one time. You would encounter many such collapsible components throughout this guide.

Collapsible section uses the <details> content </details> syntax, which are automatically rendered by Markdown, but can also be further styled with predefined classes to improve appearance and better integrate with your tutorial layout.

basic variant

The opening and closing tags of a collapsible element should be on separate lines, with the content placed in between. Immediately after the opening tag, include a <summary> element to display short instructions or titles like “see example”, “expand instructions” or “here are more details”.

It’s essential to leave one blank line between </summary> element and the actual content of the section to ensure it renders correctly.

  <details><summary> see the preview </summary>

  **By default** `Markdown` **syntax is not automatically
  rendered within** `<details>` **component.**
  </details>

see the preview

**By default** `Markdown` **syntax is not automatically rendered within** `<details>` **component.**

To enable Markdown syntax interpretation add markdown=”1” attribute within <details> tag:

<details markdown="1"><summary> see the preview </summary>

**By default** `Markdown` **syntax is not automatically
rendered within** `<details>` **component.**
</details>

see the preview

By default Markdown syntax is not automatically rendered within <details> component.

When Markdown is enabled, you can seamlessly embed code snippets within a collapsible:

<details markdown="1"><summary> see the preview </summary>

*Here is an example of how to open a file:*
```python
file = open('example.txt', 'r')
```
</details>

see the preview

Here is an example of how to open a file:

file = open('example.txt', 'r')

color-customized variant

By utilizing predefined background color classes, you can style the <details> container to seamlessly integrate with your layout:

applying a color class directly to <details> results in a uniform color for both the collapsible button and its expandable content,

see code example (single color)

<details class="bc-example" markdown="1"><summary> EXAMPLE: </summary>

*The project team uses a cloud-based bioinformatics platform (Galaxy) to streamline data analysis.
This platform allows for* **scalable computing resources** *to handle large genomic datasets efficiently and*
**includes built-in tools** *for data visualization, which simplifies the monitoring of analysis progress and outcomes.*
</details>

EXAMPLE:

The project team uses a cloud-based bioinformatics platform (Galaxy) to streamline data analysis. This platform allows for scalable computing resources to handle large genomic datasets efficiently and includes built-in tools for data visualization, which simplifies the monitoring of analysis progress and outcomes.

while assigning a color class to <summary> allows for distinct coloring of the button independent from the container.

see code example (color summary only)

<details markdown="1"><summary class="bc-note"> EXAMPLE: </summary>

*The project team uses a cloud-based bioinformatics platform (Galaxy) to streamline data analysis.
This platform allows for* **scalable computing resources** *to handle large genomic datasets efficiently and*
**includes built-in tools** *for data visualization, which simplifies the monitoring of analysis progress and outcomes.*
</details>

EXAMPLE:

see code example (distinct colors)

<details class="bc-example" markdown="1"><summary class="bc-note"> EXAMPLE: </summary>

*The project team uses a cloud-based bioinformatics platform (Galaxy) to streamline data analysis.
This platform allows for* **scalable computing resources** *to handle large genomic datasets efficiently and*
**includes built-in tools** *for data visualization, which simplifies the monitoring of analysis progress and outcomes.*
</details>

EXAMPLE:

example inputs and outputs

You can include well-formatted data examples within a collapsible component with some additional settings:

to add well-formatted text, such as tab-spaced columns of an input file, you can utilize the <pre> tag,

see code example (well-formated data)

<details><summary> DATA EXAMPLE: </summary>

<pre class="bc-data">
label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0
label_1  984    0       0       0       0       0       1       0       0
</pre>
</details>

DATA EXAMPLE:

label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0
label_1  984    0       0       0       0       0       1       0       0

by adding a specific class to the <pre> tag, its background color can be easily changed to distinguish the specific content:

see code example (expected output)

<details><summary class="bc-template"> Expected output: </summary>

<pre class="bc-output">
<b class="c-header">abadacz</b>@MacBook(bash):<b class="c-good">data_wrangling</b><span class="c-bad">$</span> pwd
        /Users/abadacz/WORKDIR/data_wrangling
</pre>
</details>

Expected output:

abadacz@MacBook(bash):data_wrangling$ pwd
        /Users/abadacz/WORKDIR/data_wrangling

to make well-formatted text copyable by a user, you can utilize the <code class="code-block"> tag combined with other classes for styling,

see code example (copyable data)

<details><summary> copyable data: </summary>

<code class="code-block bc-data"># Example dataset
label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0
</code>
</details>

copyable data:

# Example dataset
label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0

to make well-formatted text downloadable by a user, you can add the Download button within <summary> tag,

see code example (downloadable data)

<details><summary> downloadable data: <button class="btn details-save" type="button"></button> </summary>

<code class="code-block bc-data"># Example dataset
label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0
</code>
</details>

downloadable data:

# Example dataset
label_1  982    0       0       0       0       0       1       0       0
label_1  983    0       0       0       0       0       1       0       0

table

Tables can be useful to organize content because they provide a structured format for displaying data in rows and columns, making it easier to read, compare, and understand.
Example applications:

Detail parameters or arguments for functions or commands, including name, type, description, and default values if applicable.
Compare features, options, or configurations of different tools or software versions.
Break down multi-step processes into a structured format, with each row detailing a specific step, its description, and possibly the expected outcome.
Organize common problems and their solutions in a table, allowing users to quickly scan and find fixes to issues they might encounter.
Summarize the advantages and disadvantages of different methodologies, tools, or technologies, providing a clear comparison to help readers weigh their options.
Incorporate rows that pair images with descriptive text, useful for tutorials involving GUI applications, demonstrating workflows, or highlighting before-and-after scenarios.

You can create tables using either Markdown syntax or the HTML <table> tag, both of which are styled to provide a consistent rendering effect by default.

Markdown table
Markdown tables are simpler and more human-readable in raw code, offering an intuitive way to structure data. They automatically interpret other Markdown syntax elements, such as *text* for italics or `code` for inline code.

| Shortcut      |        Command        |
|---------------|-----------------------|
|`Ctrl+Shift+`  | New Terminal          |
|`Ctrl+Shift+v` | Open Markdown preview |
|`Ctrl+s`       | File: Save            |

see the preview

Shortcut	Command
`Ctrl+Shift+`	New Terminal
`Ctrl+Shift+v`	Open Markdown preview
`Ctrl+s`	File: Save

HTML table
HTML tables require the use of various HTML tags (each of which needs careful closing), such as:

<table> - for the table itself <tr> - for a new row <th> - for a header cell <td> - for a regular cell

<table>
  <tr> <th>Shortcut</th> <th>Command</th> </tr>
  <tr> <td><code>Ctrl+Shift+</code></td> <td>New Terminal</td> </tr>
  <tr> <td><code>Ctrl+s</code></td> <td>File: Save</td> </tr>
  <tr> <td><code>F5</code></td> <td>Start Debugging</td> </tr>
</table>

see the preview

Shortcut	Command
`Ctrl+Shift+`	New Terminal
`Ctrl+s`	File: Save
`F5`	Start Debugging

To apply Markdown syntax within an HTML table, like using *text* for italics or `ticks` for inline code, you must add the markdown=”1” attribute to the internal  tag
(but not directly to the table-related tags).

<table>
  <tr> <th>Shortcut</th> <th>Command</th> </tr>
  <tr> <td><p markdown="1">`Ctrl+Shift+`</p></td> <td>New Terminal</td> </tr>
  <tr> <td><p markdown="1">`Ctrl+s`</p></td> <td>File: Save</td> </tr>
</table>

see the preview

Shortcut	Command
`Ctrl+Shift+`	New Terminal
`Ctrl+s`	File: Save

While HTML syntax makes the raw code less readable due to the verbosity and necessity of closing tags, these tables offer more flexibility in construction and styling. You can opt for a more tailored presentation of data, for instance:

skipping the header row or
customize the styling by:

removing boundary lines
adding more or less padding
coloring cell backgrounds
aligning an image with text horizontally

<table>
  <tr>
    <td class="pl-0 font-1r no-border bc-example">This cell has 0 left padding, regular font size and no bottom border. The next cell in this row inludes an image.</td>
    <td class="no-border" width=110><img src="/04-devel-environment/assets/images/VSC_logo.png"></td>
  </tr>
</table>

see the preview

This cell has 0 left padding, regular font size and no bottom border. The next cell in this row inludes an image.

Styling Toolkit for DSW Contributors

Aleksandra Badaczewska

Welcome to our styling guide!

How It Works & Getting Started

text (font) colors

TOC highlighted section :

- Important Section

- EXERCISE

- Coming Soon

background colors

- TEXT

- BUTTONS

- CUSTOM BOXES

color-coded boxes

custom box styling

text color

box indentation

custom box title

- no title

- custom title

pros & cons marks:

custom spacing

code

code-inline

code-block

collapsible section

table