Devdocs vs bootstrap code#

Devdocs vs bootstrap code#

Syntax highlighting for a number of common languages, as specified in the following Prism download link, Customize your download.īy default, Prism code highlighting styles are not applied to code blocks without a specified language, instead you get Docsy’s default style of grey with black text.Copy to clipboard buttons on code blocks.

Code blocks styled with the Prism Default theme.

Prism is a popular open source syntax highlighter which supports over 200 languages and various plugins.ĭocsy includes JavaScript and CSS files for a basic Prism configuration, which supports: When this option is enabled your site uses Prism instead of Chroma for code block highlighting. bg-, the text colors will be adjusted to get proper contrast: The value of can be any of the color names, primary, white, dark, warning, light, success, 300, blue, orange etc. They are also useful when you receive the color code as a shortcode parameter. You can use these classes, for example, to style your text in an appropriate color when you don’t know if the primary color is dark or light, to ensure proper color contrast. However, we have added some color state CSS classes that can be useful in a dynamic context:

This theme adds very little on its own in this area. CSS utilitiesįor documentation of available CSS utility classes, see the Bootstrap Documentation. Note that if you decide to go with a font with different weights (in the built-in configuration this is 300 (light), 400 (medium) and 700 (bold)), you also need to adjust the weight related variables, i.e. assets/scss/ _styles_project.scss is where you can add your own custom SCSS styles, including overriding any of the styles in Docsy’s theme SCSS files.For information about other Bootstrap 4 variables, see Variable defaults and Bootstrap’s v4-dev/scss/_variables.scss file. You can find a list of Docsy’s theme variables and their default values in assets/scss/ _variables.scss. assets/scss/ _variables_project.scss is where you add project-specific definitions of theme variables such as site colors, as well as any additional Bootstrap variable values you want to set.To customize your project’s look and feel, create your own version of either or both of the followingĭocsy placeholder files (note the _project.scss suffixes): And because Docsy uses Bootstrap 4 and SCSS for styling, you can override just single values (such as project colors and fonts) in its special SCSS project variables file, or do more serious customization by creating your own styles.ĭocsy also provides options for styling your code blocks, using either Chroma or Prism for highlighting.

However, if you want your own color scheme (and you probably will!) you can very easily override the theme defaults with your own project-specific values - Hugo will look in your project files first when looking for information to build your site. Customize colors, fonts, code highlighting, and more for your site.īy default, a site using Docsy has the theme’s default fonts, colors, and general look and feel.