no page_alter

100%

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Aug 9, 2018

This example shows a Backdrop CMS module hook that conditionally loads JavaScript and CSS assets for code syntax highlighting on specific node types. It uses `hook_page_alter()` to check the current node’s type against configured enabled types, then calls `backdrop_add_css()` and `backdrop_add_js()` to include the Highlight.js library, a theme stylesheet, and a custom inline script that triggers `hljs.initHighlightingOnLoad()`. The rendering approach relies on server-side PHP logic rather than a client-side visualization library, with asset paths derived from `backdrop_get_path()`.

AI-generated description

Similar vizzes

Loading thumbnail…

WYSIWYG to CKEdtior hooks

This example shows how a Drupal module integrates a custom code syntax highlighting button into CKEditor through two hook implementations. The first hook, `hook_wysiwyg_plugin`, registers a plugin button for the CKEditor instance, while `hook_ckeditor_plugins` defines the plugin’s JavaScript file, button label, and icon image path. The code specifies the plugin’s location via `backdrop_get_path()` and uses t() for translatable UI strings, demonstrating the API contract for extending editor functionality in Backdrop CMS.

Aalexfinnarn

57% match

Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

GGolodhros

56% match

Loading thumbnail…

System module hook_init()

This example shows Drupal’s `system_init()` function managing CSS assets and database slave handling during each page request. It calls `drupal_add_css()` to load system stylesheets with specific groups and `every_page` flags, while also checking `path_is_admin()` for admin-only CSS. The code then examines `$_SESSION['ignore_slave_server']` against `REQUEST_TIME` to conditionally call `Database::ignoreTarget()`, temporarily disabling slave database servers to avoid read lag after writes. It concludes by invoking `system_add_module_assets()` to include assets declared in module `.info` files.

Aalexfinnarn

55% match

Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

KKopylovVitalik

54% match

Loading thumbnail…

Golang.org code highlight

This example shows a userscript that automatically adds syntax highlighting to code blocks on golang.org and godoc.org pages. It selects every `<pre>` element in the document body and assigns the `prettyprint` class, then injects a script tag pointing to Google’s code-prettify loader (`run_prettify.js`) from a CDN. The rendering approach relies entirely on the prettify library’s default behavior to colorize Go source code. The script, authored by netroby and sourced from a GitHub repository, runs on page load without external data or configuration.

Aadkdev

53% match

Loading thumbnail…

Untitled

This example presents a minimal, unstyled HTML page titled "Intro to HCS" that loads a stylesheet and an external JavaScript script. The page itself contains no visible content. The CSS sets a large, monospace font for the body and defines a `.highlighted` class that colors text red, though no elements with that class exist in the markup. The visualization relies entirely on the external script, whose logic is not shown here. The page uses standard HTML, CSS, and an unspecified JavaScript library, likely D3.js, to create any dynamic or interactive elements.

DDrexBuzz

52% match

Loading thumbnail…

final plugin code

This example shows a CKEditor plugin that adds a button labeled "Code Syntax Highlighting" to the editor toolbar, which triggers a custom dialog for generating code snippets. The plugin registers a command and dialog using the CKEDITOR API, and the button’s icon is loaded from the plugin’s image directory. It integrates with Backdrop and jQuery, wiring the command to the dialog so users can insert highlighted code through the editor interface.

Aalexfinnarn

50% match

Loading thumbnail…

Custom CSS for Dynalist

This example shows how to customize the appearance and typography of Dynalist, a hierarchical note-taking app, through custom CSS. It demonstrates how to style tags, notes, code blocks, the current line highlight, page headers, heading levels (H1, H2, H3), and bullet points, while also resizing the CSS textarea and setting its font to a monospace stack. The code relies on plain CSS, including pseudo-classes like `:hover` and structural selectors such as `.Node-noteContainer > [class*='Node']` and `.Node-self.is-collapsed.is-parent > .Node-bullet`, without external libraries. It uses font families like 'Fira Code' and 'Menlo', with opacity, border-radius, and padding for visual refinement.

HHerbCaudill

49% match