Skip to main content
Software Dictionary

For blogs and documentation

Link every software term on your site

Add one line to your site, and the software terms in your articles link to their pages here, with a short definition on hover. Free, no account, no tracking.

Live example

How we ship

Our team builds a single-page application in TypeScript. It talks to a REST API, keeps a cache in Redis and ships as a Docker image to Kubernetes, where a load balancer spreads the traffic and a CDN serves the static files.

Hover a dotted word, or move to it with Tab.

terms it can link
644
languages
2
KB, no dependencies
7
cookies or trackers
0

How it works

  1. 01

    Paste one line

    Add the script to your site once, in the footer.

  2. 02

    Terms are found

    It finds the software terms in your article and links each one once.

  3. 03

    Readers get the definition

    Hover or tab to a term for a short definition; one click opens the full page.

Add it in one line

Paste this before the closing </body> tag. It links the terms in your <article>, or in <main> when there is no article.

Your site's HTMLhtml
<script src="https://softwaredictionary.org/term-linker.js" defer></script>

Step by step for your platform

The same line works anywhere scripts are allowed. Here is where it goes:

WordPress
  1. 1Install the free WPCode plugin (Plugins → Add New), then open Code Snippets → Header & Footer.
  2. 2Paste the line into the Footer box.
  3. 3Click Save Changes.

Rather not add a plugin? In a child theme, add this to functions.php instead:

functions.phpphp
add_action( 'wp_footer', function () {
	echo '<script src="https://softwaredictionary.org/term-linker.js" defer></script>';
} );
Ghost
  1. 1Open Settings → Code injection.
  2. 2Paste the line into Site footer.
  3. 3Click Save.
Site footerhtml
<script src="https://softwaredictionary.org/term-linker.js" data-selector=".gh-content" defer></script>
Blogger
  1. 1Open Theme, then Customize → Edit HTML.
  2. 2Find </body> and paste the line just above it.
  3. 3Click Save.
Theme HTMLhtml
<script src="https://softwaredictionary.org/term-linker.js" data-selector=".post-body" defer></script>
Webflow, Squarespace, Wix
  1. 1Open the custom code settings: in Webflow Site settings → Custom code, in Squarespace Code injection, in Wix Settings → Custom code (Body – end).
  2. 2Paste the line into the footer code box.
  3. 3Save, then publish the site.

These builders may ask for a paid plan before they run custom code.

Footer codehtml
<script src="https://softwaredictionary.org/term-linker.js" defer></script>
Hugo, Jekyll, Eleventy
  1. 1Open the layout every page uses: layouts/_default/baseof.html in Hugo, _layouts/default.html in Jekyll, your base layout in Eleventy.
  2. 2Paste the line just before </body>.
  3. 3Build and deploy as usual.
baseof.html · default.htmlhtml
<script src="https://softwaredictionary.org/term-linker.js" defer></script>
Docusaurus
  1. 1Open docusaurus.config.js.
  2. 2Add the script and the client module below, so pages opened later are linked too.
  3. 3Restart the site, or deploy.
docusaurus.config.js · src/term-linker.jsjs
// docusaurus.config.js
export default {
  scripts: [{ src: "https://softwaredictionary.org/term-linker.js", defer: true, "data-selector": ".theme-doc-markdown" }],
  clientModules: ["./src/term-linker.js"],
};

// src/term-linker.js: link the terms of every page opened after the first
export function onRouteDidUpdate() {
  window.termLinker?.();
}
Next.js and React
  1. 1Create app/term-linker.tsx with the component below.
  2. 2Render <TermLinker /> once in your root layout.
  3. 3Deploy: after every route change, the new page's terms are linked.
app/term-linker.tsxtsx
"use client";

import Script from "next/script";
import { usePathname } from "next/navigation";
import { useEffect } from "react";

declare global {
  interface Window {
    termLinker?: () => void;
  }
}

export function TermLinker() {
  const pathname = usePathname();
  useEffect(() => {
    window.termLinker?.();
  }, [pathname]);
  return <Script src="https://softwaredictionary.org/term-linker.js" strategy="afterInteractive" />;
}

Medium, Substack and dev.to don't allow scripts in posts, so the term linker can't run there.

What it links, and what it leaves alone

  • Each term is linked once, on its first mention, so the text stays easy to read.

  • Code, headings, buttons and existing links are never touched. Add data-term-linker="off" to any element to skip it.

  • Everyday words that are software terms only in context ("branch", "commit", "session") are left out.

  • On a single-page app, call window.termLinker() after each page change.

More

Settings

EnglishTürkçe