Clean Clipper Zu Chrome hinzufügen – kostenlos

Für wen

Doku als Markdown, Code behält seine Sprache

Clean Clipper liest die Sprache eines Codeblocks auf der Seite selbst – aus der Klasse am Zaun, aus dem Elternelement, aus der Auszeichnung des Highlighters – und schreibt sie in den Zaun. Auf einem technischen Korpus aus neun Seiten überlebte die Marke in 73 von 156 Zäunen, gegen 20 und 0 bei den beiden verglichenen Engines. Der Rest der Seite kommt als gewöhnliches Markdown an, ohne Seitenleiste.

Was beim Kopieren zerbricht

Dokumentation besteht überwiegend aus Code, und genau der Teil geht bei den meisten Clippern kaputt. Der Zaun landet nackt in der Notiz: In Obsidian steht dort eine graue Wand, im Repository geht der Ausschnitt ohne Hervorhebung durch das Review. Also öffnen Sie jede Notiz noch einmal und tippen js, python oder bash über jeden Zaun. Bei drei Schnipseln fällt das kaum auf, bei dreißig Seiten ist es ein Abend.

Was um den Code herum steht, kommt kein Stück besser an. Versionsauswahl, Seitenleiste und die „Auf dieser Seite“-Spalte landen mitten im Text, und eine Parametertabelle klappt in eine einzige Zeile zusammen, weil in einer Zelle ein Codebeispiel stand. Drei Monate später suchen Sie eine Option in Ihren Notizen und stoßen zuerst auf drei Kopien desselben Menüs. Die Notiz ist da, lesen lässt sie sich nicht.

Später rächt sich das ein zweites Mal. Der Ausschnitt wandert ins Team-Wiki oder in die Beschreibung eines Pull Requests und steht dort grau und ohne Hervorhebung, weil der Zaun keine Sprache trägt. Und wenn zwei Notizen dieselbe Funktion aus zwei Versionen der Referenz beschreiben, sagt keine von beiden, welche Version gemeint war: Die Versionsnummer steckt in der Adresse, und die ist beim Kopieren als Erstes verloren gegangen. Die Notiz beantwortet dann keine Frage, sondern schickt Sie zurück auf die Seite, von der sie stammt.

Was in der Notiz ankommt

Echte Ausgabe, unbearbeitetdeveloper.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
## Array.prototype.filter()

Die Methode `filter()` erzeugt ein neues Array mit allen Elementen, die den
Test der übergebenen Funktion bestehen.

```js
const zahlen = [12, 5, 8, 130, 44];
const grosse = zahlen.filter((wert) => wert >= 10);
// [12, 130, 44]
```

| Parameter | Bedeutung |
| --- | --- |
| `callbackFn` | wird für jedes Element aufgerufen |
| `thisArg` | Wert, der als `this` dient |

Doku erfassen, Schritt für Schritt

Sechs Handgriffe, danach ist die Einrichtung erledigt und jede weitere Doku-Seite kostet einen Tastendruck. Die ersten vier stehen in den Einstellungen, die letzten beiden macht man auf der Seite selbst.

  1. Öffnen Sie die Einstellungen und wählen Sie unter „Zielordner“ das Verzeichnis, in dem die Doku-Notizen liegen sollen – das darf ein Ordner im Arbeitsbaum eines Projekts sein, etwa docs/clips. Der Browser fragt einmal nach und merkt sich die Freigabe.
  2. Setzen Sie die Namensvorlage auf {domain}-{title}. Bei Dokumentation ist die Domain die nützlichere Hälfte des Dateinamens: Sie sagt auf einen Blick, ob der Ausschnitt aus der offiziellen Referenz oder aus einem Forenbeitrag stammt.
  3. Stellen Sie Bilder auf „weglassen“. Abbildungen in Entwicklerdoku sind meist Diagramme, die als Link auf die fremde Website ohnehin nichts nützen, und ohne sie bleibt die Datei frei von Bildzeilen.
  4. Legen Sie eine Regel für die Referenz an, die Sie am häufigsten lesen: Adressmuster eintragen, Unterordner wählen. Danach landet ein Nachschlagewerk automatisch getrennt von allem anderen, ohne dass Sie beim Erfassen daran denken müssen.
  5. Gehen Sie auf die Doku-Seite und drücken Sie Alt+Shift+M. Brauchen Sie nur eine einzelne Funktion statt der ganzen Referenzseite, markieren Sie den Abschnitt vorher; der Schalter oben im Fenster zeigt, ob gerade die Auswahl oder die ganze Seite vor Ihnen liegt.
  6. Sehen Sie im Fenster die Code-Zäune durch. Steht js, php oder bash hinter den Backticks, hat die Seite die Sprache ausgezeichnet; steht dort nichts, hat sie es nicht getan, und Sie ergänzen es einmal von Hand, bevor die Datei geschrieben wird.

Fertige Einstellungen für Doku

Diese Werte sind auf Nachschlagen ausgelegt, nicht auf Archivieren: Datum spielt bei Referenzseiten kaum eine Rolle, die Herkunft dafür umso mehr. Wer Blogbeiträge und Referenz in denselben Ordner legt, sucht später zweimal.

EinstellungWertWarum gerade so
Klick auf das SymbolVorschaufensterBei Code lohnt der Blick auf die Zäune, bevor die Datei geschrieben wird
Namensvorlage`{domain}-{title}`Die Domain trennt offizielle Referenz von Forenbeitrag; ein Datum sagt bei Doku wenig aus
Zielordnerein Verzeichnis im Projekt, etwa `docs/clips`Die Notiz liegt neben dem Code, den sie erklärt, und wandert mit dem Repository mit
Bilder`weglassen`Diagramme bleiben als Link auf die fremde Website unbrauchbar und erzeugen nur Bildzeilen
Frontmatter`title`, `source`Die Adresse hält bei versionierter Doku fest, welche Version die Notiz beschreibt
Regel für WebsiteMuster `developer.mozilla.org` → Unterordner `Referenz`Nachschlagewerke gehören nicht in denselben Ordner wie flüchtige Fundstücke
Tastenkürzel`Alt+Shift+M`Beim Lesen von Doku wechselt man ständig zwischen Editor und Browser; die Hand bleibt auf der Tastatur
Der schwierige Fall: der erste Zaun bleibt nackt, weil die Seite ihn ohne Sprachklasse ausliefert – und die ungleichmäßige zweispaltige Tabelle wird zu einer `**Schlüssel**: Wert`-Zeilewiki.selfhtml.org/wiki/JavaScript/Objekte/Array/filter
---
title: "JavaScript/Objekte/Array/filter"
source: "https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/filter"
extraction: "dom"
---

## Syntax

```
arr.filter(callback)
```

```js
const zahlen = [1, 2, 3, 42];
const grosse = zahlen.filter((n) => n > 10);
```

**Rückgabewert**: ein neues Array mit den Elementen, die den Test bestanden haben

Drei Wege durch den Tag

Eine unbekannte Bibliothek bewerten

Sie prüfen, ob eine Bibliothek ins Projekt passt, und lesen dafür Einstieg, Konfiguration und die Seite über die Grenzen. Drei Seiten, drei Mal Alt+Shift+M, drei Dateien im Unterordner Referenz – mit {domain}-{title} im Namen, also alle drei nebeneinander sortiert.

Am Abend liegt die Entscheidung im Editor statt in fünfzehn offenen Tabs. Die Codebeispiele haben ihre Sprachmarke, die Optionstabelle ihre Zeilen, und die Quelladresse in jedem Frontmatter sagt, welche Version der Doku Sie gelesen haben – die Zahl steht im Pfad der Adresse und wandert damit in die Notiz.

Einen Fehler festhalten, der aus einem Forum kam

Die Lösung für ein sperriges Problem steht nicht in der offiziellen Doku, sondern in einem Beitrag mit vierzig Antworten. Sie markieren die eine Antwort, die funktioniert, und erfassen die Auswahl: In die Datei kommt der Codeblock samt Sprachmarke, nicht der ganze Strang und nicht die Seitenleiste mit den ähnlichen Fragen.

Weil die Regel für diese Website in einen anderen Unterordner zeigt als die Referenz, ist beim späteren Nachschlagen sofort klar, dass diese Lösung von einer fremden Person stammt und nicht vom Hersteller. Das ist derselbe Unterschied, den man in einem Review begründen muss.

Einen Ausschnitt in ein README übernehmen

Im README soll ein Beispiel aus der offiziellen Referenz stehen. Sie stellen den Klick auf das Symbol für diesen einen Fall auf „Zwischenablage“, erfassen die Auswahl mit dem Beispiel und fügen sie direkt in die Datei ein, ohne dass eine Notiz gespeichert wird.

Der eingefügte Zaun kommt als ```js an und wird auf GitHub sofort hervorgehoben. Die Quelladresse holen Sie sich aus dem Frontmatter des Clips, wenn Sie darunter einen Verweis auf die Referenz setzen wollen – die Zeile steht im Fenster über dem Text.

Gegen die üblichen Wege

Die Alternativen sind nicht schlecht, sie lösen nur andere Aufgaben – und für Code lösen sie ausgerechnet den Teil nicht, auf den es ankommt. Die letzte Zeile nennt auch, was dieser Weg kostet.

WegWas dabei herauskommtWas es kostet
Markieren und in den Editor kopierenDer Text kommt an, die Zäune kommen nackt, Parametertabellen fallen in eine ZeileSprachmarke an jedem Zaun nachtippen; die Quelladresse fehlt vollständig
Seite als PDF druckenDas Aussehen bleibt erhalten, der Code wird Teil des SeitenlayoutsNicht einfügbar, nicht versionierbar, und die Suche des Editors greift nicht hinein
Lesezeichen setzenEin Link und ein TitelDie Seite wird mit der nächsten Version umgeschrieben, das Lesezeichen zeigt dann auf etwas anderes
Andere Markdown-ErweiterungenMarkdown, aber mit dem Beiwerk der Seite darinAuf demselben technischen Korpus überlebte die Sprachmarke in 20 von 156 Zäunen, bei einer weiteren Engine in keinem einzigen
Clean ClipperMarkdown mit Sprachmarken, erhaltenen Tabellen und FrontmatterEine Seite nach der anderen, kein Stapelbetrieb; ein Zaun, den die Seite nicht auszeichnet, bleibt auch hier nackt

Wenn etwas schiefgeht

Warum steht hinter meinen Backticks keine Sprache?

Weil die Seite selbst keine angibt. Clean Clipper liest die Klasse, die der Highlighter der Website am Zaun hinterlassen hat, und rät nicht aus dem Code – auf dem technischen Korpus trugen 73 von 156 Zäunen überhaupt eine solche Klasse. Bei den übrigen bleibt der Zaun nackt, und das ist die richtige Antwort: Eine erfundene Marke schaltet die Hervorhebung auf die falsche Sprache und ist schlechter als gar keine.

Warum meldet die Erweiterung auf der Doku-Startseite „kein Artikel“?

Weil dort keiner steht. Eine Übersichtsseite besteht fast nur aus Linkbeschriftungen, und die Erweiterung prüft das fertige Markdown: Sitzt mehr als ein Viertel davon in Links, verweigert sie den Clip. Gehen Sie eine Ebene tiefer auf die Seite mit dem eigentlichen Text, dann läuft es.

Die Doku wird per JavaScript aufgebaut – warum fehlt der halbe Inhalt?

Erfasst wird das DOM in dem Zustand, in dem es steht, wenn Sie klicken. Eine Single-Page-Doku wird deshalb korrekt erfasst, aber Registerkarten und Aufklapper, die geschlossen sind, existieren im DOM oft gar nicht. Klappen Sie den Abschnitt auf und wechseln Sie auf die Registerkarte, die Sie brauchen, bevor Sie erfassen.

Warum ist aus dem Hinweiskasten ein Zitatblock geworden?

Weil Markdown keine Standardsyntax für Hinweisboxen hat. Der Inhalt bleibt vollständig erhalten, die Auszeichnung als „Warnung“ oder „Achtung“ nicht – sie wird zu >. In Obsidian lässt sich daraus mit einer Zeile ein Callout machen, die Erweiterung entscheidet das aber nicht für Sie.

Was es nicht tut

Es rät die Sprache eines Zauns nicht, den die Seite selbst nicht auszeichnet: Wo eine Website Code ohne Klasse ausliefert, bleibt der Zaun nackt, und das ist Absicht – eine erfundene Marke kostet mehr als eine fehlende. Es läuft nicht über eine ganze Doku-Website: eine Seite nach der anderen, und zwar die, auf der Sie stehen, ohne Crawler und ohne Stapelbetrieb. Es lädt weder Diagramme noch Bildschirmfotos herunter; Bilder bleiben Links auf die ursprüngliche Website. Und auf Seiten, die der Browser schützt, etwa chrome:// und dem Erweiterungsstore, läuft es gar nicht.

Zu Chrome hinzufügen – kostenlosVollständig kostenlos, ohne Konto und ohne Bezahlversion.

Fragen

Welche Sprachen erkennt es?
Die, die die Seite selbst angibt. Clean Clipper rät die Sprache nicht aus dem Code, sondern liest die Klasse, die der Highlighter der Website hinterlassen hat – die Marke ist damit so richtig wie die Quellseite und fehlt, wenn die Seite keine angibt.
Funktioniert es bei Dokumentation, die per JavaScript aufgebaut wird?
Ja. Die Erweiterung liest das DOM, nachdem die Seite gerendert ist. Eine Single-Page-Dokumentation wird deshalb so erfasst, wie Sie sie sehen, mit dem Abschnitt, der gerade offen steht.
Bleibt Inline-Code erhalten?
Ja. Kurze Fragmente bleiben zwischen Backticks stehen, auch innerhalb von Überschriften, Listen und Tabellenzellen.
Kann ich Bilder aus Entwicklerdoku weglassen?
Ja. Stellen Sie Bilder in den Einstellungen auf „weglassen“, global oder als Regel für eine einzelne Website.
Lässt sich eine Seite hinter einer bestehenden Anmeldung erfassen?
Ja, weil die Erweiterung die Seite liest, die Ihr Browser für Sie gerendert hat. Eine interne Dokumentation hinter dem Firmen-Login wird wie jede andere Seite erfasst.
Kann ich eine ganze Referenz auf einmal erfassen?
Nein. Es gibt weder Crawler noch Stapelbetrieb: erfasst wird die Seite, auf der Sie gerade stehen. Für einen Umzug bedeutet das, dass Sie die Seiten auswählen, die wirklich mitkommen sollen – was bei den meisten Dokumentationen weniger sind, als der Umfang vermuten lässt.
Was passiert mit Registerkarten für mehrere Programmiersprachen?
Erfasst wird, was im Moment des Clips gerendert ist. Ein geschlossenes Register existiert im DOM häufig gar nicht, also wechseln Sie vorher auf die Sprache, die Sie brauchen.
Bleibt die Einrückung in einem Codeblock erhalten?
Ja. Vorformatierte Blöcke werden zeichengetreu übernommen, Leerraum und Zeilenumbrüche eingeschlossen – ein eingerücktes YAML- oder Python-Beispiel bleibt gültig.
Kann ich die Notiz direkt ins Repository schreiben?
Ja. Der Zielordner darf jedes Verzeichnis auf Ihrer Festplatte sein, auch eines im Arbeitsbaum eines Projekts; die Datei erscheint dort und lässt sich wie jede andere einchecken.
Kann ich eine Doku-Seite später mit der neuen Version vergleichen?
Ja, aber den Vergleich machen Sie selbst. Bei gleichem Dateinamen hängt die Erweiterung eine Zahl an, statt zu überschreiben – beide Fassungen liegen danach nebeneinander und lassen sich mit dem Diff-Werkzeug Ihres Editors gegenüberstellen.