react-syntax-highlighter/dist/esm/styles/hljs#vs2015 JavaScript Examples
The following examples show how to use
react-syntax-highlighter/dist/esm/styles/hljs#vs2015.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From mds-docs with MIT License | 4 votes |
|
StoryComp = ({
componentData,
showArgsTable = true,
htmlData,
propData = {},
}) => {
const testRef = useRef(null);
const [zoom, setZoom] = useState(1);
const [activeTab, setActiveTab] = React.useState(0);
const [jsxCode, setJsxCode] = React.useState(
getRawPreviewCode(componentData)
);
const html = beautifyHTML(htmlData,
beautifyHTMLOptions
);
const [htmlCode, setHtmlCode] = useState(html);
const [isExpanded, setIsExpanded] = useState(false);
const [activeButton, setActiveButton] = useState('React');
const renderHTMLTab = () => {
return (
<Tab label={<Button>HTML</Button>}>
{renderCodeBlock(htmlCode)}
</Tab>
);
};
const renderCodeBlock = (val) => (
<div>
<style>
{`pre {
margin: 0;
text-align: left;
}`}
</style>
<SyntaxHighlighter
language='javascript'
style={vs2015}
showLineNumbers={true}
>
{val}
</SyntaxHighlighter>
</div>
);
const copyCode = (val) =>
navigator.clipboard.writeText(val);
const CopyCode = (props) => {
const { onClick } = props;
return (
<div className='ml-auto d-flex'>
<img
src={logo}
className='codesandBox-icon mr-6 align-self-center'
onClick={(e) => {
e.preventDefault();
openSandbox(jsxCode);
}}
/>
<Icon
name='content_copy'
size={20}
appearance='white'
onClick={onClick}
className='align-self-center cursor-pointer'
/>
</div>
);
};
const handleZoomIn = () => {
setZoom(zoom + 0.5);
};
const handleZoomOut = () => {
setZoom(zoom - 0.5);
};
const showLiveEditorContent = () => {
if (activeButton === 'React') {
return (
<div>
<LiveEditor theme={vsDark} />
</div>
);
} else {
return renderCodeBlock(htmlCode);
}
};
const imports = React.useMemo(() => ({ ...DS }), []);
return (
<>
<div className='pt-8 pb-8 d-flex w-100 m-auto flex-column align-items-center'>
<LiveProvider code={jsxCode} scope={imports}>
<Card
shadow='light'
className='w-100 overflow-hidden'
>
<CardHeader>
<div className='d-flex justify-content-end'>
<Button
onClick={() => handleZoomIn()}
icon='zoom_in'
appearance='transparent'
largeIcon
className='transformation-button'
></Button>
<Button
onClick={() => handleZoomOut()}
icon='zoom_out'
appearance='transparent'
largeIcon
className='transformation-button'
></Button>
</div>
</CardHeader>
<CardBody className='d-flex flex-column align-items-center'>
<div ref={testRef}>
<LivePreview
className='p-8 live-preview'
style={{ zoom: zoom }}
/>
<LiveError />
</div>
<div className='d-flex flex-row-reverse w-100 mb-6'>
<Button
appearance='basic'
className='action-button'
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? 'Hide code' : 'Show code'}
</Button>
</div>
</CardBody>
</Card>
{isExpanded && (
<Card
shadow='light'
className='w-100 overflow-hidden mt-6 live-editor-card'
>
<div>
<div className='d-flex px-4 pt-6'>
<Button
appearance='basic'
onClick={() => setActiveButton('React')}
selected={
activeButton === 'React'
? true
: false
}
className='mr-3'
>
React
</Button>
<Button
appearance='basic'
onClick={() => setActiveButton('HTML')}
selected={
activeButton === 'HTML' ? true : false
}
>
HTML
</Button>
{activeButton === 'React' && (
<CopyCode
onClick={() => {
const editor =
document.querySelector(
'.npm__react-simple-code-editor__textarea'
);
if (editor) copyCode(editor.value);
}}
/>
)}
</div>
</div>
{showLiveEditorContent()}
</Card>
)}
</LiveProvider>
{showArgsTable && (
<>
<Heading className='mt-10 align-self-start'>
Props
</Heading>
<ArgsTable rows={propData} />
</>
)}
</div>
</>
);
}
Example #2
| Source File: App.js From tailblocks with MIT License | 4 votes |
|
render() {
const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} />
<aside className="sidebar" ref={this.sidebarRef}>
{this.listRenderer()}
</aside>
<div className="toolbar">
<button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
{this.state.codeView &&
<div className="clipboard-wrapper">
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
{clipboardIcon}
<span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
</div>
}
<button className="copy-the-block" onClick={this.toggleView}>
{!this.state.codeView ?
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M16 18L22 12 16 6"></path>
<path d="M8 6L2 12 8 18"></path>
</svg>
:
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="css-i6dzq1"
viewBox="0 0 24 24"
>
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
}
<span>{!this.state.codeView ? 'VIEW CODE': 'PREVIEW'}</span>
</button>
<div className="switcher">
{this.themeListRenderer()}
</div>
{this.viewModeRenderer()}
<button className="mode" onClick={this.changeMode}></button>
</div>
<div className="markup" ref={this.markupRef}>{getBlock({ theme, darkMode })[blockType][blockName]}</div>
<main className="main" style={{ opacity: this.state.ready ? '1' : '0' }}>
<div className={`view${this.state.codeView ? ' show-code' : ''}`}>
<Frame
contentDidMount={this.handleContentDidMount}
contentDidUpdate={this.handleContentDidUpdate}
head={
<>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
{
<style dangerouslySetInnerHTML={{__html:
`img { filter:
${darkMode ?
'invert(1) opacity(.5); mix-blend-mode: luminosity; }'
:
'sepia(1) hue-rotate(190deg) opacity(.46) grayscale(.7) }'
}`
}}
/>
}
</>
}
>
{getBlock({ theme, darkMode })[blockType][blockName]}
</Frame>
<div className="codes">
<SyntaxHighlighter language="html" style={darkMode ? vs2015 : docco} showLineNumbers>
{this.beautifyHTML(this.state.markup)}
</SyntaxHighlighter>
</div>
</div>
</main>
<a href="https://github.com/mertJF/tailblocks" className="github" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
/>
</svg>
GitHub
</a>
<div className="keyboard-nav">
<div className={`k-up keyboard-button${currentKeyCode === 38 ? ' is-active' : ''}`} data-info="Previous block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</div>
<div className="keyboard-nav-row">
<div className={`k-left keyboard-button${currentKeyCode === 37 ? ' is-active' : ''}`} data-info="Hide sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
</div>
<div className={`k-down keyboard-button${currentKeyCode === 40 ? ' is-active' : ''}`} data-info="Next block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
<div className={`k-right keyboard-button${currentKeyCode === 39 ? ' is-active' : ''}`} data-info="Show sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</div>
</div>
</div>
);
}
