WIP

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/global-styles/markdown-tweaks.scss

@@ -49,6 +49,14 @@
     }
   }
 
+  hr {
+    color: #bbbcbf;
+    @media print {
+      color: transparent !important;
+      border-bottom: 2px solid #bbbcbf;
+    }
+  }
+
   blockquote .blockquote-extra {
     font-size: 0.85em;
     margin-inline-start: 0.5em;

frontend/global-styles/print.scss

@@ -7,4 +7,32 @@
   .heading-anchor {
     display: none;
   }
+
+  mark {
+    print-color-adjust: exact;
+  }
+
+  h1, h2, h3, h4, h5 {
+    break-after: avoid;
+  }
+
+  table, figure {
+    break-inside: avoid;
+  }
+
+  @page {
+    size: A4;
+    margin: 0 15pt;
+  }
+
+  .print-link {
+    display: block;
+  }
+
+}
+
+@media screen {
+  .print-link {
+    display: none;
+  }
 }

frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx

@@ -12,6 +12,7 @@ import React, { Fragment, useRef } from 'react'
 import { Button } from 'react-bootstrap'
 import { Files as IconFiles } from 'react-bootstrap-icons'
 import type { Variant } from 'react-bootstrap/types'
+import styles from './style.module.scss'
 
 export interface CopyToClipboardButtonProps extends PropsWithDataCypressId {
   content: string
@@ -40,6 +41,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
   return (
     <Fragment>
       <Button
+        className={styles['copy-button']}
         ref={button}
         size={size}
         variant={variant}

frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss

@@ -0,0 +1,11 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@media print {
+  .copy-button {
+    display: none;
+  }
+}

frontend/src/components/common/highlighted-code/highlighted-code.module.scss

@@ -55,3 +55,10 @@
     }
   }
 }
+
+@media print {
+  .code-highlighter {
+    border: black solid 1px;
+    border-radius: var(--bs-border-radius);
+  }
+}

frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss

@@ -6,6 +6,10 @@
 
 .click-shield {
 
+  @media print {
+    display: none;
+  }
+
   position: relative;
   cursor: pointer;
   width: 100%;

frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts

@@ -16,7 +16,7 @@ const replaceAsciinemaLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}>`
+    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}><br /><a class='print-link' href='https://asciinema.org/a/${match}'>https://asciinema.org/a/${match}</a>`
   }
 }