diff --git a/website/assets/js/components/bubble.component.js b/website/assets/js/components/bubble.component.js
new file mode 100644
index 0000000000..ae3be5a359
--- /dev/null
+++ b/website/assets/js/components/bubble.component.js
@@ -0,0 +1,60 @@
+/**
+ * <bubble>
+ * -----------------------------------------------------------------------------
+ * A styled span used in documentation.
+ *
+ * @type {Component}
+ *
+ * @event click   [emitted when clicked]
+ * -----------------------------------------------------------------------------
+ */
+
+parasails.registerComponent('bubble', {
+  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
+  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
+  //  ╩  ╩╚═╚═╝╩  ╚═╝
+  props: [
+    'type',
+  ],
+
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: function (){
+    return {
+      rawType: this.type ? this.type.replace(/\?$/, '').toLowerCase() : '',
+      isUncertain: this.type ? this.type.match(/\?$/g) ? true : false : '',
+    };
+  },
+
+  //  ╦ ╦╔╦╗╔╦╗╦
+  //  ╠═╣ ║ ║║║║
+  //  ╩ ╩ ╩ ╩ ╩╩═╝
+  template: `
+    <span>
+      <span purpose="bubble-heart" :class="rawType+' '+[[isUncertain ? 'uncertain' : '']]" class="">{{type}}</span>
+    </span>
+  `,
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    if(this.type === undefined){
+      throw new Error(`Incomplete usage of <bubble>: Please provide a 'type' that will be displayed as text inside the bubble. e.g., <bubble type="Observer"></bubble>`);
+    }
+  },
+  mounted: async function(){
+    //…
+  },
+  beforeDestroy: function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});
diff --git a/website/assets/styles/components/bubble.component.less b/website/assets/styles/components/bubble.component.less
new file mode 100644
index 0000000000..93a25da207
--- /dev/null
+++ b/website/assets/styles/components/bubble.component.less
@@ -0,0 +1,30 @@
+
+/**
+ * <bubble>
+ *
+ * App-wide styles for our bubbles.
+ */
+
+ [parasails-component='bubble'] {
+  span {
+    color: white;
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    height: 20px;
+    line-height: 20px;
+    vertical-align: middle;
+    border-radius: 15px;
+    font-size: 11px;
+    background-color: #0e6471;
+    border-color: darken(#0e6471, 10%);
+    border-style: none;
+    &.uncertain {
+      border-width: 1px;
+      border-style: solid;
+      font-style: italic;
+      background-color: #FFF;
+      color: #222;
+    }
+  }
+}
diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less
index eb9d6bd855..4b8b305024 100644
--- a/website/assets/styles/importer.less
+++ b/website/assets/styles/importer.less
@@ -30,6 +30,7 @@
 @import 'components/animated-arrow-button.component.less';
 @import 'components/docs-nav-and-search.component.less';
 @import 'components/multifield.component.less';
+@import 'components/bubble.component.less';
 
 // Per-page styles
 @import 'pages/homepage.less';
diff --git a/website/scripts/build-static-content.js b/website/scripts/build-static-content.js
index 8b6b1c57e4..945c84159d 100644
--- a/website/scripts/build-static-content.js
+++ b/website/scripts/build-static-content.js
@@ -426,8 +426,22 @@ module.exports = {
               if(htmlString.match(/(&#96;){3,4}[\s\S]+(&#96;){3}/g)){
                 throw new Error('The compiled markdown has a codeblock (\`\`\`) nested inside of another codeblock (\`\`\`\`) at '+pageSourcePath+'. To resolve this error, remove the codeblock nested inside another codeblock from this file.');
               }
-              // (2025-11-06) eashaw: I'm commenting the line below out to resolve a bug where the regex below would replace content inside of a code block. See https://github.com/fleetdm/fleet/issues/34935 for more details.
-              // htmlString = htmlString.replace(/\(\(([^())]*)\)\)/g, '<bubble type="$1" class="colors"><span is="bubble-heart"></span></bubble>');// « Replace ((bubble))s with HTML. For more background, see https://github.com/fleetdm/fleet/issues/706#issuecomment-884622252
+              htmlString = htmlString.replace(
+                /(<code(?:\s[^>]*)?>[\s\S]*?<\/code>)|\(\(([^()]*)\)\)/g,
+                (match, codeBlock, bubbleContent) => {
+                  if (codeBlock) {
+                    // ignore content inside of <code> elements.
+                    return codeBlock;
+                  } else {
+                    let sanitizedType = bubbleContent.trim().replace(/["'`]/g, '');
+                    if (!sanitizedType) {
+                      return match; // ignore bubbles with no text
+                    } else {
+                      return `<bubble type="${sanitizedType}" class="colors"></bubble>`;
+                    }
+                  }
+                }
+              );// « Replace ((bubble))s (outside of code blocks) with HTML. For more background, see https://github.com/fleetdm/fleet/issues/706#issuecomment-884622252
               htmlString = htmlString.replace(/(href="(\.\/[^"]+|\.\.\/[^"]+)")/g, (hrefString)=>{// « Modify path-relative links like `./…` and `../…` to make them absolute.  (See https://github.com/fleetdm/fleet/issues/706#issuecomment-884641081 for more background)
                 let oldRelPath = hrefString.match(/href="(\.\/[^"]+|\.\.\/[^"]+)"/)[1];
                 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 9c5e377b0d..160becfa3f 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -857,6 +857,7 @@
     <script src="/js/components/ajax-form.component.js"></script>
     <script src="/js/components/animated-arrow-button.component.js"></script>
     <script src="/js/components/bar-chart.component.js"></script>
+    <script src="/js/components/bubble.component.js"></script>
     <script src="/js/components/call-to-action.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
     <script src="/js/components/docs-nav-and-search.component.js"></script>