docs: switch to fenced codeblocks (#31806)

2026-06-14 18:42:30 +03:00 · 2020-10-19 12:56:49 +03:00
parent 48177c946f
commit e6618a6ebb
43 changed files with 494 additions and 446 deletions
@@ -97,12 +97,12 @@ Add, remove, or modify values within the map to update how they're used in many

 Here's how you can use these in your Sass:

-{{< highlight scss >}}
+```scss
 .alpha { color: $purple; }
 .beta {
  color: $yellow-300;
  background-color: $indigo-900;
 }
-{{< /highlight >}}
+```

 [Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color` using the `500` color values.
@@ -46,9 +46,9 @@ We encourage you to adopt these guidelines when building with Bootstrap to creat
  </div>
 </div>

-{{< highlight html >}}
+```html
 <div class="callout">...</div>
-{{< /highlight >}}
+```

 In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class.

@@ -14,7 +14,7 @@ Bootstrap includes around two dozen [CSS custom properties (variables)](https://

 Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.

-{{< highlight css >}}
+```css
 {{< root.inline >}}
 {{- $css := readFile "dist/css/bootstrap.css" -}}
 {{- $match := findRE ":root {([^}]*)}" $css 1 -}}
@@ -26,7 +26,7 @@ Here are the variables we include (note that the `:root` is required) that can b
 {{- index $match 0 -}}

 {{< /root.inline >}}
-{{< /highlight >}}
+```

 ## Component variables

@@ -40,11 +40,11 @@ We're also using CSS variables across our grids—primarily for gutters—with m

 CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.

-{{< highlight css >}}
+```css
 body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
 }
 a {
  color: var(--bs-blue);
 }
-{{< /highlight >}}
+```
@@ -12,7 +12,7 @@ Utilize our source Sass files to take advantage of variables, maps, mixins, and

 Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:

-{{< highlight text >}}
+```text
 your-project/
 ├── scss
 │   └── custom.scss
@@ -20,31 +20,31 @@ your-project/
    └── bootstrap
        ├── js
        └── scss
-{{< /highlight >}}
+```

 If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own.

-{{< highlight text >}}
+```text
 your-project/
 ├── scss
 │   └── custom.scss
 └── bootstrap/
    ├── js
    └── scss
-{{< /highlight >}}
+```

 ## Importing

 In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.

-{{< highlight scss >}}
+```scss
 // Custom.scss
 // Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```

-{{< highlight scss >}}
+```scss
 // Custom.scss
 // Option B: Include parts of Bootstrap

@@ -60,7 +60,7 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
-{{< /highlight >}}
+```

 With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.

@@ -74,14 +74,14 @@ Variable overrides within the same Sass file can come before or after the defaul

 Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:

-{{< highlight scss >}}
+```scss
 // Your variable overrides
 $body-bg: #000;
 $body-color: #111;

 // Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```

 Repeat as necessary for any variable in Bootstrap, including the global options below.

@@ -95,25 +95,25 @@ Some of our Sass maps are merged into empty ones by default. This is done to all

 All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:

-{{< highlight scss >}}
+```scss
 $primary: #0074d9;
 $danger: #ff4136;
-{{< /highlight >}}
+```

 Later on, theses variables are set in Bootstrap's `$theme-colors` map:

-{{< highlight scss >}}
+```scss
 $theme-colors: (
  "primary": $primary,
  "danger": $danger
 );
-{{< /highlight >}}
+```

 ### Add to map

 Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.

-{{< highlight scss >}}
+```scss
 // Create your own map
 $custom-colors: (
  "custom-color": #900
@@ -121,13 +121,13 @@ $custom-colors: (

 // Merge the maps
 $theme-colors: map-merge($theme-colors, $custom-colors);
-{{< /highlight >}}
+```

 ### Remove from map

 To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:

-{{< highlight scss >}}
+```scss
 // Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@@ -140,7 +140,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
 ...
-{{< /highlight >}}
+```

 ## Required keys

@@ -154,12 +154,12 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col

 Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.

-{{< highlight scss >}}
+```scss
 .custom-element {
  color: $gray-100;
  background-color: $dark;
 }
-{{< /highlight >}}
+```

 You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.

@@ -167,7 +167,7 @@ You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-colo

 In practice, you'd call the function and pass in the color and weight parameters.

-{{< highlight scss >}}
+```scss
 .custom-element {
  color: tint-color($primary, 10%);
 }
@@ -175,7 +175,7 @@ In practice, you'd call the function and pass in the color and weight parameters
 .custom-element-2 {
  color: shade-color($danger, 30%);
 }
-{{< /highlight >}}
+```

 ### Color contrast

@@ -185,29 +185,29 @@ An additional function we include in Bootstrap is the color contrast function, `

 For example, to generate color swatches from our `$theme-colors` map:

-{{< highlight scss >}}
+```scss
@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
 }
-{{< /highlight >}}
+```

 It can also be used for one-off contrast needs:

-{{< highlight scss >}}
+```scss
 .custom-element {
  color: color-contrast(#000); // returns `color: #fff`
 }
-{{< /highlight >}}
+```

 You can also specify a base color with our color map functions:

-{{< highlight scss >}}
+```scss
 .custom-element {
  color: color-contrast($dark); // returns `color: #fff`
 }
-{{< /highlight >}}
+```

 ### Escape SVG

@@ -219,7 +219,7 @@ We use the `add` and `subtract` functions to wrap the CSS `calc` function. The p

 Example where the calc is valid:

-{{< highlight scss >}}
+```scss
 $border-radius: .25rem;
 $border-width: 1px;

@@ -232,11 +232,11 @@ $border-width: 1px;
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
 }
-{{< /highlight >}}
+```

 Example where the calc is invalid:

-{{< highlight scss >}}
+```scss
 $border-radius: .25rem;
 $border-width: 0;

@@ -249,4 +249,4 @@ $border-width: 0;
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
 }
-{{< /highlight >}}
+```