jialin
2 years ago
parent
3842006f6e
commit
177ebd1bbe
@ -0,0 +1,76 @@
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
import CopyButton from '../copy-button';
|
||||
import { escapeHtml } from './utils';
|
||||
|
||||
interface CodeViewerProps {
|
||||
code: string;
|
||||
lang: string;
|
||||
autodetect?: boolean;
|
||||
ignoreIllegals?: boolean;
|
||||
copyable?: boolean;
|
||||
}
|
||||
const CodeViewer: React.FC<CodeViewerProps> = (props) => {
|
||||
const {
|
||||
code,
|
||||
lang,
|
||||
autodetect = true,
|
||||
ignoreIllegals = true,
|
||||
copyable = true
|
||||
} = props || {};
|
||||
|
||||
const renderCode = () => {
|
||||
const autodetectLang = autodetect && !lang;
|
||||
const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang);
|
||||
let className = '';
|
||||
|
||||
if (!cannotDetectLanguage) {
|
||||
className = `hljs ${lang}`;
|
||||
}
|
||||
|
||||
// No idea what language to use, return raw code
|
||||
if (cannotDetectLanguage) {
|
||||
console.warn(`The language "${lang}" you specified could not be found.`);
|
||||
return {
|
||||
value: escapeHtml(code),
|
||||
className: className
|
||||
};
|
||||
}
|
||||
|
||||
if (autodetectLang) {
|
||||
const result = hljs.highlightAuto(code);
|
||||
return {
|
||||
value: result.value,
|
||||
className: className
|
||||
};
|
||||
}
|
||||
const result = hljs.highlight(code, {
|
||||
language: lang,
|
||||
ignoreIllegals: ignoreIllegals
|
||||
});
|
||||
return {
|
||||
value: result.value,
|
||||
className: className
|
||||
};
|
||||
};
|
||||
|
||||
const highlightedCode = renderCode();
|
||||
|
||||
return (
|
||||
<pre className="code-pre">
|
||||
<code
|
||||
className={highlightedCode.className}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: highlightedCode.value
|
||||
}}
|
||||
></code>
|
||||
<CopyButton
|
||||
text={highlightedCode.value}
|
||||
size="small"
|
||||
style={{ color: '#abb2bf' }}
|
||||
></CopyButton>
|
||||
</pre>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeViewer;
|
||||
@ -0,0 +1,17 @@
|
||||
import CodeViewer from './code-viewer';
|
||||
import './style.less';
|
||||
|
||||
const HighlightCode: React.FC<{
|
||||
code: string;
|
||||
lang?: string;
|
||||
}> = (props) => {
|
||||
const { code, lang = 'bash' } = props;
|
||||
|
||||
return (
|
||||
<div className="high-light-wrapper">
|
||||
<CodeViewer lang={lang} code={code} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HighlightCode;
|
||||
@ -0,0 +1,22 @@
|
||||
.high-light-wrapper {
|
||||
text-align: left;
|
||||
|
||||
.hljs {
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding-inline: 0;
|
||||
padding-block: 1.2em;
|
||||
}
|
||||
|
||||
.code-pre {
|
||||
padding-inline: 12px 32px;
|
||||
position: relative;
|
||||
background-color: #282c34;
|
||||
border-radius: var(--border-radius-mini);
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
export function escapeHtml(value: string): string {
|
||||
return value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import HighlightCode from '@/components/highlight-code';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Modal } from 'antd';
|
||||
import React from 'react';
|
||||
import { addWorkerGuide } from '../config';
|
||||
|
||||
type ViewModalProps = {
|
||||
open: boolean;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
||||
const { open, onCancel } = props || {};
|
||||
const intl = useIntl();
|
||||
|
||||
const origin = window.location.origin;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
open={open}
|
||||
centered={true}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={true}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
footer={null}
|
||||
>
|
||||
<div>
|
||||
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
|
||||
<h4>Linux Or MacOS </h4>
|
||||
<HighlightCode code={addWorkerGuide.mac.getToken}></HighlightCode>
|
||||
<h4>Windows </h4>
|
||||
<HighlightCode code={addWorkerGuide.win.getToken}></HighlightCode>
|
||||
<h3>2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}</h3>
|
||||
<h4>Linux Or MacOS </h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.mac.registerWorker(origin)}
|
||||
></HighlightCode>
|
||||
<h4>Windows </h4>
|
||||
<HighlightCode
|
||||
code={addWorkerGuide.win.registerWorker(origin)}
|
||||
></HighlightCode>
|
||||
<h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AddWorker);
|
||||
Loading…
Reference in new issue