Technology Tales

How the Bootstrap 4 Grid Works

The Bootstrap 4 grid system is a layout tool built around a structure of containers, rows and columns, powered by Flexbox. It follows three core rules: columns must be direct children of rows, rows exist solely to contain columns and rows should be placed inside a container.

Bootstrap 4 offers two container types, a fixed-width version and a full-width version, both of which serve to align content and counteract the negative margins applied to rows. The grid is based on a 12-column unit system, allowing for a wide variety of layout combinations, and also supports auto-layout columns that automatically size themselves without needing unit values.

Responsive behaviour is managed through five breakpoints tied to screen widths, ranging from the default extra-small tier up through small, medium, large and extra-large, with larger breakpoints overriding smaller ones. Columns can stack vertically, wrap when their combined units exceed 12, be reordered relative to sibling columns and be nested within one another. Because rows use Flexbox display, columns within the same row share equal height, and alignment can be controlled using Flexbox utility classes.

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer

From version 0.62.0 onwards, Hugo replaced its previous Blackfriday Markdown renderer with Goldmark, which is CommonMark compliant. One consequence of this change is that the previous method of configuring links to open in a new browser tab, via a setting in the config.toml file, no longer works.

Goldmark instead supports Markdown Render Hooks, which allow developers to create custom HTML template files within the layouts/_default/_markup directory to modify default Markdown behaviour. To replicate the previous link behaviour and force external links to open in a new tab, a render-link.html file must be created in that directory containing a template that conditionally adds a target="_blank" attribute to any link beginning with http, whilst internal links using relative paths will continue to open in the same tab.

Markdown Syntax Guide for Hugo

Here is a Markdown syntax guide that was created as a personal reference while learning to use Hugo, a framework for building web pages, with the aim of documenting all commonly needed formatting elements, verifying that styles rendered correctly and testing custom shortcodes for handling responsive images, video and panoramas. The guide covers a comprehensive range of Markdown features including headings, paragraphs, inline formatting such as italics and bold, blockquotes, footnotes, tables, code blocks and various list types including ordered, unordered, nested, mixed and task lists. It also addresses the limitations of standard Markdown image handling in Hugo, noting that built-in options offer little control over sizing and responsiveness, which led to the creation of custom shortcodes for figures, panoramic images and video content.

Styling tables with Hugo

When working with Hugo, Markdown alone may not always provide sufficient control over the visual styling of rendered elements such as tables. To apply HTML classes directly to a table, a custom Hugo shortcode can be created in the layouts directory. This shortcode processes the inner Markdown content, converts it to HTML, and then replaces the default table tag with one that includes a specified CSS class. Once the shortcode is in place, a standard Markdown table is wrapped within the shortcode tags, with the desired Bootstrap classes passed as a parameter, allowing for styled output such as striped and bordered tables.

Style a Markdown Table With Bootstrap Classes in Hugo

A method for applying Bootstrap table classes to Markdown tables directly within Hugo content files is described, involving the creation of a shortcode that accepts a Markdown table and specified Bootstrap classes as arguments, enabling the table to be styled without requiring separate data files or external definitions.

Stackedit on NPM

Here is a fully featured, open-source Markdown editor based on PageDown, the library used by Stack Overflow and other Stack Exchange sites. It offers tools for content creation and collaboration and can be installed via npm, with options for local development, production builds and deployment using Helm charts to Kubernetes clusters, requiring configuration with cloud service credentials and ingress settings. The editor can be embedded in websites or used as a Chrome app and includes features for integrating with platforms like Dropbox, Google, GitHub and WordPress.

The markdownlint extension for Visual Studio Code provides linting and style checking for Markdown files, using a library of rules to encourage consistency and standards. When editing a Markdown file, rule violations are flagged with a wavy green underline, and many of these violations can be fixed automatically through built-in formatting commands or by saving the document.

The extension supports workspace-wide linting, toggling linting on and off and configuring rules through JSON, YAML or JavaScript configuration files placed at various levels of a project. Settings can also be managed directly through VS Code's user and workspace preferences, with options to control behaviour such as focus mode, when linting runs and the severity level at which violations are displayed.

Custom rules can be added via JavaScript files or NPM packages, and individual violations can be suppressed inline using comments within the Markdown file itself. The extension honours VS Code's Workspace Trust setting to mitigate the security risks associated with running JavaScript from custom rule files or configuration files in untrusted workspaces.

Hugo Multilingual Part 1: Content translation

Setting up multilingual support in Hugo involves configuring language settings, translating content through filename or directory-based systems and ensuring proper linking between translations. Resources such as images or data files can be shared across translations or localised individually using page bundles, while data files require manual handling to match language-specific content. URLs can be adjusted to reflect localised slugs and the .Sites method allows access to default language content from other language contexts. The process also includes managing theme strings for localisation in subsequent steps, ensuring consistency across all language versions of a site.

How to Convert HTML to Markdown in Python?

Converting HTML to Markdown in Python is achieved using the third-party markdownify package, which must be installed via pip before use. Once imported, the process involves passing an HTML string to the markdownify() function, along with optional parameters such as heading style, to produce a properly formatted Markdown output. For example, HTML elements such as headings and unordered lists are converted into their Markdown equivalents, with headings rendered using hash symbols and list items preceded by asterisks.

Markdown Guide

This free and open-source resource provides comprehensive guidance on using Markdown, a straightforward markup language designed to simplify document formatting for web use. It includes a cheat sheet, explanations of basic and extended syntax features such as tables and code blocks and tools to help users create and enhance content. The guide is accessible to beginners and experienced users alike, with options to subscribe for updates, and is maintained as a project by Matt Cone under a Creative Commons licence.