## Revealing the Frontmatter
Normally frontmatter is hidden by the default Obsidian publish CSS. The following combination of CSS achieves the visible frontmatter, and it’s styling, shown on my site. Slap it in your `publish.css`. ^preview
```css
.el-pre.mod-frontmatter.mod-ui pre,
.el-pre.mod-frontmatter.mod-ui code,
.el-pre.mod-frontmatter.mod-ui span {
all: unset;
}
.el-pre.mod-frontmatter.mod-ui pre {
display: block !important;
}
.el-pre.mod-frontmatter.mod-ui {
font-size: var(--metadata-label-font-size);
line-height: 30px;
margin-bottom: 40px;
white-space: pre;
}
.el-pre.mod-frontmatter.mod-ui .key {
color: var(--metadata-label-text-color);
width: var(--metadata-label-width);
display: inline-block;
overflow: clip;
text-overflow: ellipsis;
}
.el-pre.mod-frontmatter.mod-ui .key + .punctuation,
.frontmatter .copy-code-button {
display: none;
}
```
## Activating Tags
One annoying issue with the publish frontmatter is the absence of any Obsidian app features, like tags being clickable just like in the body content. The following works around this by grabbing tags out of the Obsidian API and dressing them as body content links to replace the frontmatter tags. Call this function in `publish.js`.
```javascript
function activateFmTags() {
const fmContainer = document.querySelector('.frontmatter code');
if (!fmContainer || !fmContainer.innerHTML.includes('tags'))
return false;
console.log('replaceing fm tags…');
const tags = app.site.cache.cache[app.currentFilepath].frontmatter.tags || [];
let tagHtml = fmContainer.innerHTML;
for (const t of tags) {
const linkedTag = `<a href="#${t}" class="tag" target="_blank" rel="noopener nofollow">#${t}</a>`;
const re = `(tags.*\\[.*)${t}(.*\\])`; // make sure we don't replace words
tagHtml = tagHtml.replace(new RegExp(re), `$1${linkedTag}$2`);
}
// remove array characters:
fmContainer.innerHTML = tagHtml.replace(/[,\[\]]/g, '');
return true;
}
```