diff --git a/packages/typescriptlang-org/src/components/handbook/Contributors.tsx b/packages/typescriptlang-org/src/components/handbook/Contributors.tsx
index 2ad829d9906a..5abfe490dddd 100644
--- a/packages/typescriptlang-org/src/components/handbook/Contributors.tsx
+++ b/packages/typescriptlang-org/src/components/handbook/Contributors.tsx
@@ -57,7 +57,7 @@ export const Contributors = (props: ContributorsProps) => {
   }, []);
 
   return (
-    <div className="whitespace-tight raised" style={{ padding: 0 }}>
+    <div className="whitespace-tight raised no-print" style={{ padding: 0 }}>
       <Row className="justify-between small-columns">
         <Section sKey="pr">
           <p>
diff --git a/packages/typescriptlang-org/src/components/handbook/NextPrev.tsx b/packages/typescriptlang-org/src/components/handbook/NextPrev.tsx
index 3868009a97a6..d2b5891751c3 100644
--- a/packages/typescriptlang-org/src/components/handbook/NextPrev.tsx
+++ b/packages/typescriptlang-org/src/components/handbook/NextPrev.tsx
@@ -17,7 +17,7 @@ export const NextPrev = (props: NextPrevProps) => {
   const next = props.next && props.next.childMarkdownRemark.frontmatter
 
   return (
-    <div className="whitespace-tight raised">
+    <div className="whitespace-tight raised no-print">
       <Row className="justify-between">
         {!prev ? <EmptyLink /> : <LinkSection i={props.i} data={prev} InltLink={props.IntlLink} type="prev" />}
         <div className="hide-small vertical-line" />
diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
index 787696486118..33a6033a1ec5 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
@@ -122,7 +122,7 @@ export const Sidebar = (props: Props) => {
   }
 
   return (
-    <nav id="sidebar">
+    <nav id="sidebar" className="np-print">
       <ul>
         {props.navItems.map(item => <RenderItem key={item.id} item={item} openAllSectionsExceptWhatsNew={props.openAllSectionsExceptWhatsNew} selectedID={props.selectedID} />)}
       </ul>
diff --git a/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx b/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx
index 588ab174d030..71095a7302d2 100644
--- a/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx
+++ b/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx
@@ -235,7 +235,7 @@ export const SiteFooter = (props: Props) => {
   const hideDocs = props.suppressDocRecommendations
   const lang = props.lang
   return (
-    <footer id="site-footer" role="contentinfo">
+    <footer id="site-footer" role="contentinfo" className="no-print">
       {props.suppressCustomization ? null : <Customize />}
 
       {hideDocs ? null :
diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.tsx b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
index 501e28f6627f..4414b419f46e 100644
--- a/packages/typescriptlang-org/src/components/layout/TopNav.tsx
+++ b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
@@ -87,7 +87,7 @@ export const SiteNav = (props: Props) => {
 
 
   return (
-    <header dir="ltr">
+    <header dir="ltr" className="no-print">
       <a className="skip-to-main" href={props.skipToAnchor || '#site-content'} tabIndex={0}>{i("skip_to_content")}</a>
 
       <div id="top-menu" className="up">
diff --git a/packages/typescriptlang-org/src/style/globals.scss b/packages/typescriptlang-org/src/style/globals.scss
index 0799f343de39..86ad9e8e879f 100644
--- a/packages/typescriptlang-org/src/style/globals.scss
+++ b/packages/typescriptlang-org/src/style/globals.scss
@@ -47,3 +47,14 @@ $z-index-for-search: 100;
 $z-index-for-site-nav: 101;
 $z-index-for-handbook-nav: 99;
 $z-index-for-handbook-nav-button: 100;
+
+// add print media query
+@media print {
+    .no-print, .no-print * {
+        display: none !important;
+    }
+    .code-container {
+        display: block;
+        break-inside: avoid;
+    }
+  }
\ No newline at end of file
diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
index 619878a558b6..b54bc8a1edaa 100644
--- a/packages/typescriptlang-org/src/templates/documentation.tsx
+++ b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -165,7 +165,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
                     <MarkdownHeadingTree tree={headerListToTree(sidebarHeaders)} className="handbook-on-this-page-section-list" slug={slug} />
                   </>
                   }
-                  <div id="like-dislike-subnav">
+                  <div id="like-dislike-subnav" className="no-print">
                     <h5>{i("handb_like_dislike_title")}</h5>
                     <div>
                       <button title="Like this page" id="like-button"><LikeUnfilledSVG /> {i("handb_like_desc")}</button>