If you use the Dataview plugin and use it’s inline properties, you’ll notice that styling does not carry over to a published site (as with all plugins) resulting in some ugly content like this: ^preview
```
Here are [Some::unstyled] inline (dataview::props).
```
Here is a solution:
1. Add the content from `.obsidian/plugins/dataview/styles.css` to your `publish.css` file.
2. Add this to your `publish.js` to add the relevant tags to inline properties:
```javascript
setTimeout(function () {
/**
* example:
* <span class="dataview inline-field">
* <span class="dataview inline-field-key">Key</span>
* <span class="dataview inline-field-value"><span>Value</span></span>
* </span>
* Note: element data properties are also added in the obsidian app, but are not needed on the web
*/
const keys = /\[([^\[:\n]+)::\s*([^\]]+)\]/g;
const hiddenKeys = /\([^(:\n]+::\s*([^)]+)\)/g;
const tags = ['p', 'li', 'td']; // limiting for speed, adjust accordingly
for (const tag of tags) {
for (const e of contentElement.getElementsByTagName(tag)) {
console.log('parsing inline fields in', e.length, 'elements of', tag);
if (e.innerHTML.match(keys))
e.innerHTML = e.innerHTML.replace(keys, '<span class="dataview inline-field"><span class="dataview inline-field-key">$1<span class="dataview inline-field-value"><span>$2</span></span></span>');
if (e.innerHTML.match(hiddenKeys))
e.innerHTML = e.innerHTML.replace(hiddenKeys, '<span class="dataview inline-field"><span class="dataview inline-field-standalone-value"><span>$1</span></span></span>');
}
}
}, 300); // you may adjust this timing if you thinks it's too slow
```
With this, the styles should kick in accordingly! This site uses this solution, and here is the exact string from above without the code block protecting it:
Here are [Some::unstyled] inline (dataview::props).