How can I use text formatting (bold, italic, etc.) with i18n using Gatsby? - internationalization

Question

I'm using gatsby-plugin-react-i18next for translating my website, and it works with simple text. But when I try to format parts of the text, with bold text or italic text, it doesn't work (I don't know how to do it).
How can I format a specific part of a paragraph using i18n?
Below is an example of my setup.
page JS
const IndexPage = () => {
const { t } = useTranslation();
return (
<Layout>
<Seo title="Home" />
<div>
<h1>
{t("HomepageHeader")}
</h1>
<p>
{t("HomepageDescription")}
</p>
</div>
</Layout>
)
}
export default IndexPage
Folder structure:
locales
-en
--translation.json
-nl
--translation.json
Example JSON en
{
"HomepageHeader": "Grow your business with a modern website!",
"HomepageDescription": "Your website is the number 1 selling point, to your customers. Make sure you get the most out of it!"
}
How can I make for example only "number 1 selling point" in the HomepageDescription bold?

Answer 1

Have a look at the Trans Component: https://react.i18next.com/latest/trans-component
Or use a markdown component, something like:
import React from 'react';
import Markdown from './Markdown';
import { useTranslation } from '../utils';
export function Text({
i18nKey,
ns = 'client-locize-app-loaders',
i18nOptions = {},
message,
defaultValue,
linkTarget = '_blank',
}) {
const { t, ready } = useTranslation(ns, { useSuspense: false });
if (!ready)
return (
<Markdown source={message || 'loading...'} noContainer options={{ linkTarget: '_blank' }} />
);
return (
<Markdown
source={message || t(i18nKey, { defaultValue, ...i18nOptions })}
noContainer
options={{ linkTarget }}
/>
);
}
import React from 'react';
import { Remarkable } from 'remarkable';
export class Markdown extends React.Component {
constructor(props) {
super(props);
this.content = this.content.bind(this);
this.renderMarkdown = this.renderMarkdown.bind(this);
}
componentWillUpdate(nextProps, nextState) {
if (nextProps.options !== this.props.options) {
this.md = new Remarkable(nextProps.options);
}
}
content() {
if (this.props.source)
return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
return React.Children.map(this.props.children, (child) => {
if (typeof child === 'string') {
return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
}
return child;
});
}
renderMarkdown(source) {
if (!this.md) this.md = new Remarkable(this.props.options);
if (this.props.renderInline) return this.md.renderInline(source);
return this.md.render(source);
}
render() {
const Container = this.props.container;
if (this.props.noContainer) return this.content();
return (
<Container className={this.props.className} style={this.props.style}>
{this.content()}
</Container>
);
}
}
Markdown.defaultProps = {
noContainer: false,
renderInline: false,
container: 'div',
options: {},
className: '',
};