npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reveal.js-linkify

v1.0.2

Published

A Reveal.js plugin to automatically create links to online compilers

Downloads

2

Readme

Linkify

A Reveal.js plugin to automatically create links to online compilers.

Demo

Linkify will add a "Run Online!" button to every supported code block automatically. The language can be set by adding a <language> or language-<language> class to the code element:

<pre><code class="javascript">
console.log("Hello, world!");
</code></pre>
<pre><code class="language-javascript">
console.log("Hello, world!");
</code></pre>

When using Markdown, the language can be specified as usual:

```js
console.log("Hello, world!");
```

The language can also be determined automatically with the code highlight plugin!

For ease of use in HTML mode, it is recommended to use the data-trim and data-noescape attributes:


<pre><code class="language-javascript" data-trim data-noescape>
    console.log("Hello, world!");
</code></pre>

Supported languages: C++ (Godbolt), JavaScript (Codepen).

Installation

Simple

Simply copy the plugin/linkify directory into your slide's plugins directory.

NPM

The plugin can be installed using npm install --save reveal.js-linkify.

Setup

To load the plugin, simply load both the JavaScript:


<script src="plugin/linkify/linkify.js"></script>

And CSS:


<link rel="stylesheet" href="plugin/linkify/linkify.css">

If you installed the plugin via npm, you should prefix the paths with node_modules/reveal.js-linkify/.

Once this is done, you can directly load the Linkify plugin by adding Linkify in your Reveal.js plugins list:

Reveal.initialize({
  // configuration...

  plugins: [ /* other plugins..., */ Linkify]
});

When using RevealMarkdown and/or RevealHighlight, make sure to load Linkify after these plugins.

Configuration

Linkify can be configured directly into Reveal.js's configuration:

Reveal.initialize({
  // configuration...

  linkify: {
    // Linkify configuration options
    text: 'Run Online!', // Set the text of the link
    class: 'linkify-link', // Set the class added to the link
    languages: { // Language-specific configurations
      cpp: {
        disassemble: false, // Whether to launch Godbolt in disassembler mode or in run mode

        compiler: 'clang_trunk', // The compiler to use (see http://godbolt.org/api/compilers for the list of compilers)
        options: '', // The flags to pass to the compiler
        execute: true, // Whether to automatically execute the code
        libs: [], // Any libraries to load
      },
      javascript: {
        editors: {
          html: false, // Whether to open the html editor
          css: false, // Whether to open the css editor
          javascript: true, // Whether to open the javascript editor
        },
        layout: 'left', // The layout to use (top, left or right)
      },
    },
  },

  plugins: [ /* other plugins..., */ Linkify]
});

Style

Changing the style of the link is done by applying new styles to the .reveal pre code + .linkify-link selector.

You can either do it in your own stylesheet or change the provided one.

In-depth configuration

To allow for even more configuration (for example to allow for comparison between several compilers on Godbolt), languages can be configured through several methods as well. However, these are more complex and may require an understanding of the online compiler's api to implement. Please see the methods for each language in the corresponding languages/<language>.js file. Do not hesitate to ask should you have any questions!

For example, to compare GCC and Clang on Godbolt, you might do:

Reveal.initialize({
  // configuration...

  linkify: {
    // Linkify configurations options
    languages: {
      cpp: {
        disassemble: true,

        compilers(config) {
          return [
            {
              id: 'clang_trunk',
              libs: this.libs,
              options: this.options,
              filters: {
                execute: this.execute,
              },
            },
            {
              id: 'gsnapshot',
              libs: this.libs,
              options: this.options,
              filters: {
                execute: this.execute,
              },
            },
          ];
        },
      },
    },
  },

  plugins: [ /* other plugins..., */ Linkify],
});

Adding a new language

Adding a new language is as simple as adding an object inside the languages dictionary with the key being the language name and the value an object with at least an element method returning an element or list of elements to append after the code block:

Reveal.initialize({
  // configuration...

  linkify: {
    // Linkify configurations options
    languages: {
      my_new_language: {
        element(config, source) {
          const el = ...;
          
          // Create a link to the online compier...
          // An example for a GET request can be seen in language/cpp.js.
          // An example for a POST request can be seen in language/javascript.js
          
          return el; // return [el, ...];
        },
      },
    },
  },

  plugins: [ /* other plugins..., */ Linkify],
});

If you have implemented a new editor for a new language, please do not hesitate to make a PR!

License

GNU GPLv3 Licensed

Copyright (C) 2023, Alex van Vliet [email protected]

Thanks

Thanks for using Linkify!