# dp-title Renders a single-line **title** as safe inline rich text: emoji shortcodes, inline GitHub-flavored markdown (bold, italic, inline code, strikethrough), and `DOMPurify` sanitisation. It is the title-sized companion to [dp-content](/docs/component-dp-content.html): both expose the shared `contentRenderer` engine (`static/js/ContentRenderer.js`), but `dp-title` calls its `renderInline` path, so it never produces block elements, links, images, or media embeds and stays on one line. > Server-rendered titles are now produced on the **backend** for SEO (the `render_title` Jinja > global, `devplacepy/rendering.py`, same inline behaviour). This client component is retained for > **live, client-generated** titles only and for future use; do not wrap server-known titles in it. Source: `static/js/components/AppTitle.js`. ## Behaviour - On connection the element reads its own text, renders it once, and replaces its contents with the sanitised inline HTML. - The renderer is inline-only: `marked.parseInline` is used (not the block parser), and sanitisation restricts output to inline formatting tags (`b`, `strong`, `i`, `em`, `code`, `del`, `s`, `mark`, `sub`, `sup`, `span`, `br`). Anchors, images, and block tags are stripped, so a `dp-title` placed inside an existing link or heading never produces nested or block markup. - Sanitisation is fail-closed: rendering throws if `DOMPurify` is unavailable rather than emitting unsanitised HTML. - The element is `display: inline`, so it drops in directly inside an `h1`/`h3`, an anchor, or a span without changing layout. - The server still emits the raw title text as the element's content, so no-JS clients see the title as plain text (only the emoji/markdown enhancement is client-side). ## Where it is used Server-rendered titles (posts, projects, gists, news, issues, profile tabs, listings, saved, leaderboard, back-links) are rendered on the backend via the `render_title` Jinja global. This client component is used only for titles created live in the browser and is available for future client-side use. ## Usage Put the title text as the element's content. Escape any literal HTML you do not want treated as live markup: ```html <h3 class="post-title"><dp-title>Shipped **v2** today :rocket:</dp-title></h3> ```