fix(doc): doc类型README.md无法高亮显示代码块问题

.vscode/settings.json

@@ -36,5 +36,8 @@
  "Swiper",
  "tdesign"
  ],
- "typescript.tsdk": "node_modules/typescript/lib"
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "search.exclude": {
+ "**/node_modules": false
+ }
 }

package.json

@@ -118,7 +118,7 @@
  "sass": "^1.55.0",
  "tailwindcss": "^3.3.3",
  "tdesign-icons-view": "^0.2.7",
- "tdesign-site-components": "^0.15.2",
+ "tdesign-site-components": "^0.15.4",
  "tdesign-theme-generator": "^1.0.15",
  "ts-node": "^10.9.1",
  "typescript": "^5.0.2",

script/plugin-tdoc/md-to-wc.mjs

@@ -38,7 +38,6 @@ export default async function mdToReact(options) {
  import { h, define } from 'omi';
  import { signal, effect } from 'reactive-signal'
  import Prismjs from 'prismjs';
- import 'prismjs/components/prism-bash.js';
  ${demoDefsStr}
  ${demoCodesDefsStr}
  ${components}
@@ -96,8 +95,21 @@ export default async function mdToReact(options) {
  document.title = \`${mdSegment.title} | TDesign\`;
 
  setTimeout(() => {
- Prismjs.highlightAll();
- }, 10);
+ const container = document.querySelector("#app > router-view").shadowRoot.querySelector("component-layout > td-wc-content").shadowRoot.querySelector("div[name='DOC']");
+ if(container){
+ if(document.getElementById('prismjs-bash')) {
+ Prismjs.highlightAllUnder(container, false);
+ } else {
+ import('prismjs/components/prism-bash.js?raw').then((e)=>{
+ const script = document.createElement('script');
+ script.innerHTML = e.default;
+ script.id = 'prismjs-bash';
+ document.body.appendChild(script);
+ Prismjs.highlightAllUnder(container, false);
+ })
+ }
+ };
+ });
 
  return (
  <>

site/main.tsx

@@ -10,8 +10,6 @@ import { Router } from 'omi-router';
 import { routes } from './routes';
 
 import '@common/style/web/docs.less';
-import 'tdesign-site-components/lib/styles/prism-theme.less';
-import 'tdesign-site-components/lib/styles/prism-theme-dark.less';
 
 const router = new Router({
  routes,

site/pages/layout/td-wc-content/index.tsx

@@ -1,6 +1,8 @@
 import docStyles from '@common/style/web/docs.less?inline';
 import type { VNode } from 'omi';
 import { bind, Component, tag } from 'omi';
+import prismCss from 'tdesign-site-components/lib/styles/prism-theme.less?inline';
+import prismCssDark from 'tdesign-site-components/lib/styles/prism-theme-dark.less?inline';
 import siteStyles from 'tdesign-site-components/lib/styles/style.css?raw';
 
 import { fallback } from '../../components/fallback.tsx';
@@ -55,7 +57,7 @@ export class tdWcContent extends Component<{ componentImport: () => Promise<any>
 
  pageStatus: string = 'show';
 
- static css = [siteStyles, docStyles, styles];
+ static css = [siteStyles, docStyles, prismCss, prismCssDark, styles];
 
  changeTocAndTitleHeight() {
  const { scrollTop } = document.documentElement;