如何突出显示里面的字符串标记反应？ 危险地设置InnerHTML
[英]How to highlight string inside <code/> tag in react? dangerouslySetInnerHTML
问题描述
<div dangerouslySetInnerHTML={{__html: props.body}} />
Hi mates
嗨，伙计们
I am using the above to display the html in string format.我正在使用上述内容以字符串格式显示 html。 This string is returned from stackexchange api.此字符串从 stackexchange api 返回。 And I want to highlight the Text inside the code block.我想突出显示代码块内的文本。 the string will look like this字符串看起来像这样
<p>I'm doing the same as shown in the documentation <a href=\"https://developer.android.com/jetpack/compose/libraries#hilt\" rel=\"nofollow noreferrer\">here</a>.\nI want to Inject the ViewModel into a Composable function (Screen), but I get this error:</p>\n<blockquote>\n<p>Cannot create an instance of class\ncom.example.blotube.ui.later.LaterViewModel</p>\n</blockquote>\n<p><strong>My ViewModel:</strong></p>\n<pre><code>@HiltViewModel\nclass LaterViewModel @Inject constructor(\n private val database: Database\n):ViewModel() {\n\n val watchLater=database.videos().getAll()\n\n}\n</code></pre>\n<p><strong>My Composable Function (Screen):</strong></p>\n<pre><code>@Composable\nfun WatchLater(vm: LaterViewModel = viewModel()){\n\n\n val videos=vm.watchLater.observeAsState()\n val context= LocalContext.current\n \n\n}\n</code></pre>\n"
I want to display this or I want to display the stackoverflow web in my website i have tried it using iframe.我想显示这个，或者我想在我的网站上显示 stackoverflow web 我已经使用 iframe 进行了尝试。 But it doesn't help me it just said the web refused to connect.但这对我没有帮助，只是说 web 拒绝连接。 Both answers or solutions are accpeted.答案或解决方案都被接受。
1 个解决方案
解决方案1
0 已采纳 2021-04-22 16:36:48
you can use prism.js library to achieve this.您可以使用 prism.js 库来实现这一点。
<html> <head> <style> </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css" /> </head> <body> <pre> <code class="language-javascript"> <p>I'm doing the same as shown in the documentation <a href="https://developer.android.com/jetpack/compose/libraries#hilt" rel="nofollow noreferrer">here</a>. I want to Inject the ViewModel into a Composable function (Screen), but I get this error:</p> <blockquote> <p>Cannot create an instance of classcom.example.blotube.ui.later.LaterViewModel</p> </blockquote> <p><strong>My ViewModel:</strong></p> <pre> <code class="language-javascript"> @HiltViewModelclass LaterViewModel @Inject constructor(private val database: Database):ViewModel() { val watchLater=database.videos().getAll()} </code> </pre> <p><strong>My Composable Function (Screen):</strong></p> <pre> <code class="language-javascript"> @Composablefun WatchLater(vm: LaterViewModel = viewModel()) {val videos=vm.watchLater.observeAsState()val context= LocalContext.current} </code> </pre> </code> </pre> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.