prism-react-renderer#PrismTheme TypeScript Examples
The following examples show how to use
prism-react-renderer#PrismTheme.
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: LiveEdit.tsx From use-comments with MIT License | 5 votes |
|
prismTheme: PrismTheme = {
plain: {
color: '#e7d2ed',
},
styles: [
{
types: ['prolog', 'comment', 'doctype', 'cdata'],
style: {
color: 'hsl(30, 20%, 50%)',
},
},
{
types: ['property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
style: { color: '#f677e1' },
},
{
types: ['attr-name', 'string', 'char', 'builtin', 'insterted'],
style: {
color: 'hsl(75, 70%, 70%)',
},
},
{
types: [
'operator',
'entity',
'url',
'string',
'variable',
'language-css',
],
style: {
color: 'hsl(40, 90%, 70%)',
},
},
{
types: ['deleted'],
style: {
color: 'rgb(255, 85, 85)',
},
},
{
types: ['italic'],
style: {
fontStyle: 'italic',
},
},
{
types: ['important', 'bold'],
style: {
fontWeight: 'bold',
},
},
{
types: ['regex', 'important'],
style: {
color: '#e90',
},
},
{
types: ['atrule', 'attr-value', 'keyword'],
style: {
color: '#f677e1',
},
},
{
types: ['punctuation', 'symbol'],
style: {
opacity: 0.7,
},
},
],
}
Example #2
| Source File: codeTheme.ts From mswjs.io with MIT License | 5 votes |
|
theme: PrismTheme = Object.assign({}, CodeTheme as any, {
plain: {
color: '#d6deeb',
backgroundColor: 'var(--color-black)',
},
})
Example #3
| Source File: code-theme.ts From geist-ui with MIT License | 4 votes |
|
makeCodeTheme = (theme: GeistUIThemes): PrismTheme => ({
plain: {
backgroundColor: theme.palette.background,
color: theme.palette.accents_4,
fontWeight: '400',
fontStyle: 'normal',
fontFamily: theme.font.mono,
fontSize: '.875rem',
textRendering: 'geometricPrecision',
},
styles: [
{
types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],
style: {
color: 'theme.palette.accents_3',
opacity: 0.5,
},
},
{
types: ['namespace'],
style: {
opacity: 1,
},
},
{
types: ['tag', 'operator', 'number'],
style: {
color: theme.palette.accents_6,
},
},
{
types: ['property', 'function'],
style: {
color: theme.palette.success,
},
},
{
types: ['tag-id', 'selector', 'atrule-id'],
style: {
color: '#eeebff',
},
},
{
types: ['attr-name'],
style: {
color: theme.palette.warning,
},
},
{
types: [
'boolean',
'string',
'entity',
'url',
'attr-value',
'keyword',
'control',
'directive',
'unit',
'statement',
'regex',
'at-rule',
'placeholder',
'variable',
],
style: {
color: theme.palette.purple,
},
},
{
types: ['deleted'],
style: {
textDecorationLine: 'line-through',
},
},
{
types: ['language-javascript', 'script'],
style: {
color: theme.palette.success,
},
},
{
types: ['inserted'],
style: {
textDecorationLine: 'underline',
},
},
{
types: ['italic'],
style: {
fontStyle: 'italic',
},
},
{
types: ['important', 'bold'],
style: {
fontWeight: 'bold',
},
},
{
types: ['important'],
style: {
color: '#c4b9fe',
},
},
],
})
Example #4
| Source File: prism-theme.ts From mantine with MIT License | 4 votes |
|
dark = (theme: MantineTheme): PrismTheme => ({
plain: {
color: theme.colors.gray[4],
backgroundColor: theme.colors.dark[8],
},
styles: [
{
types: ['comment'],
style: {
color: theme.colors.gray[6],
},
},
{
types: ['string', 'inserted', 'selector', 'atrule'],
style: {
color: theme.colors.teal[4],
},
},
{
types: ['number'],
style: {
color: theme.colors.blue[4],
},
},
{
types: ['builtin', 'char', 'constant', 'function'],
style: {
color: theme.colors.orange[5],
},
},
{
types: ['punctuation'],
style: {
color: theme.colors.gray[5],
},
},
{
types: ['variable'],
style: {
color: theme.colors.gray[5],
},
},
{
types: ['class-name', 'attr-name'],
style: {
color: theme.colors.yellow[5],
},
},
{
types: ['tag', 'deleted'],
style: {
color: theme.colors.red[6],
},
},
{
types: ['operator'],
style: {
color: theme.colors.gray[5],
},
},
{
types: ['boolean'],
style: {
color: theme.colors.red[6],
},
},
{
types: ['keyword'],
style: {
color: theme.colors.indigo[3],
},
},
{
types: ['doctype'],
style: {
color: theme.colors.gray[5],
},
},
{
types: ['url'],
style: {
color: theme.colors.gray[5],
},
},
],
})
Example #5
| Source File: prism-theme.ts From mantine with MIT License | 4 votes |
|
light = (theme: MantineTheme): PrismTheme => ({
plain: {
color: theme.colors.gray[9],
backgroundColor: theme.fn.rgba(theme.colors.gray[0], 0.65),
},
styles: [
{
types: ['comment'],
style: {
color: theme.colors.gray[6],
},
},
{
types: ['string', 'inserted'],
style: {
color: theme.colors.indigo[9],
},
},
{
types: ['number'],
style: {
color: theme.colors.blue[7],
},
},
{
types: ['builtin', 'char', 'constant', 'function', 'selector', 'atrule'],
style: {
color: theme.colors.lime[9],
},
},
{
types: ['punctuation'],
style: {
color: theme.colors.gray[7],
},
},
{
types: ['variable'],
style: {
color: theme.colors.violet[9],
},
},
{
types: ['attr-name'],
style: {
color: theme.colors.green[9],
},
},
{
types: ['class-name'],
style: {
color: theme.colors.red[9],
},
},
{
types: ['tag', 'deleted'],
style: {
color: theme.colors.violet[9],
},
},
{
types: ['operator'],
style: {
color: theme.colors.red[9],
},
},
{
types: ['boolean'],
style: {
color: theme.colors.red[9],
},
},
{
types: ['keyword'],
style: {
color: theme.colors.red[9],
},
},
{
types: ['doctype'],
style: {
color: theme.colors.gray[7],
},
},
{
types: ['url'],
style: {
color: theme.colors.gray[7],
},
},
],
})
