ViewCode

Used to display and highlight dynamic code blocks.

Demo

React

LanguagePlaintextBashCC++C#CSSDiffDockerfileErlangGoGraphQLHTTPJavaJavaScriptJSONKotlinObjective-CPHPPythonShellSQLTypeScriptXMLYAML

This is a plain text block

Vue

LanguagePlaintextBashCC++C#CSSDiffDockerfileErlangGoGraphQLHTTPJavaJavaScriptJSONKotlinObjective-CPHPPythonShellSQLTypeScriptXMLYAML

      This is a plain text block
    

Usage

React

import { ViewCode } from '@fintech-sandpit/ui/react';

const value = 'const getExampleString = (): string => {
  return 'This is a code block';
}';

return (
  <ViewCode
    value={value}
    language="typescript"
  />
);

Vue

<script setup lang="ts">
import { ViewCode } from '@fintech-sandpit/ui/vue';

const value = 'const getExampleString = (): string => {
  return 'This is a code block';
}';
</script>

<template>
  <ViewCode
    :value="value"
    language="typescript"
  />
</template>

Props

Name	Type	Default	Description
value	string	—	The value of the code block
language	Language	plaintext	The language of the code block

Types

Language

type Language = (
  | 'bash'
  | 'c'
  | 'cpp'
  | 'csharp'
  | 'css'
  | 'diff'
  | 'dockerfile'
  | 'erlang'
  | 'go'
  | 'graphql'
  | 'http'
  | 'java'
  | 'javascript'
  | 'json'
  | 'kotlin'
  | 'objectivec'
  | 'php'
  | 'plaintext'
  | 'python'
  | 'shell'
  | 'sql'
  | 'typescript'
  | 'xml'
  | 'yaml'
)