Gist 8019475

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

78% match

Use systemjs/plugin-text to import html directly to $routeProvider or $templateCache, works great with jspm bundle.

This example shows how to load HTML templates as AngularJS module dependencies using SystemJS’s text plugin, avoiding separate HTTP requests. The code demonstrates three approaches: a directive’s `template` property, `$templateCache.put` for reuse, and `$routeProvider.when` for route-specific templates. Each snippet imports the template string via `import somethingHTML from './something.html!text'`, which SystemJS resolves at build time. The examples rely on AngularJS’s dependency injection and SystemJS’s bundle-friendly module loading, making templates directly available in the application’s JavaScript bundle.

Gist ff898d829474754ee41930e78894fa7e

This example demonstrates a Markdown editor’s multi-format documentation capabilities, showcasing syntax for LaTeX equations, highlighted Python code, flowcharts, sequence diagrams, Gantt charts, and tables. The document mixes inline math with a codecogs image URL for a formula, while leveraging fenced code blocks to invoke specific rendering engines like flow, seq, and gantt. It also includes a Todo list and a Bash command snippet, illustrating how structured text can be transformed into interactive diagrams and formatted output.

AAlsaxian

Gist cf65d4442946f9016d84d3562f267824

This example demonstrates a dynamic plugin system for an Angular application that loads and initializes modular features at runtime. The code uses Angular’s `Compiler` and `Injector` APIs to asynchronously compile and instantiate modules, while the `SettingsService` supplies the list of plugins to activate. It shows how plugins can be defined either as direct Angular injector definitions or as objects containing an `ngModule` and optional providers, which are then compiled and attached to the application’s root injector. The rendering approach is code-based, with no visual output, focusing on the service layer that orchestrates lazy-loaded functionality.

Markdown Demo

This example showcases the rendering of Markdown content in VizHub, demonstrating a wide range of syntax including headings, emphasis, links, tables, code blocks, blockquotes, task lists, and embedded HTML. The README.md file serves as the Markdown source, while the visualization includes an index.html that displays a large "Hello HTML!" message styled with CSS. The example highlights how VizHub processes Markdown and HTML files, using standard Markdown parsing and HTML rendering to present the content in the gallery. It does not use any additional JavaScript libraries for data visualization.

CCurran Kelleher

Gist 85f76a1d46b0309fd975

This example presents a slide deck on HTML5 adoption for an internal IT presentation. It covers HTML5 elements, form enhancements, and new attributes such as `autofocus`, `input type="date"`, `datalist`, and the `dialog` element. The content includes code snippets for JavaScript and HTML, and references live samples like a CodePen demo. It explains how HTML5 simplifies validation and input controls compared to older JavaScript-heavy approaches.

MMiyaton

59% match

Directive-less ng-pageslide

A slide-out panel demonstrates Angular's dynamic class binding for a directive-less page slide. The example uses an HTML div with the classes `ng-pageslide` and `ng-pageslide-left`, toggling an `open` class via `ng-class` based on the `panels.state` variable. The accompanying CSS defines smooth transitions for width and height properties, expanding the panel to 350px wide from the left edge over 0.5 seconds. The code relies on Angular's built-in `ng-class` directive and CSS3 transitions, with the content inside the panel becoming visible only when the `open` class is applied.

59% match

Gist e6f198ff61f5d2d9ec3a540a0ac3b9ca

This example demonstrates a minimal D3.js v5 application that uses the `d3.select` method to target an HTML element with the ID `hello` and replace its text content with "Hello World!!". The code imports D3 as a module from a bundled file path (`/-/d3@5.9.2.bundle.js`), which is configured via an Airdrop setup for dependency management. The rendering approach is simple DOM manipulation, not a data-driven visualization, as no scales, shapes, or data bindings are present. The example serves as a basic integration test for loading D3 in a module-based project.