7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-08-08 16:15:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support code highlight and markdown gfm

Browse Source
This commit is contained in:
Yifei Zhang
2023-03-20 06:06:29 +00:00
parent 12f52bf252
commit f5aef317df
8 changed files with 448 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/home.tsx
View File

@@ -1,15 +1,11 @@
"use client";
import { useState, useRef, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import "katex/dist/katex.min.css";
import RemarkMath from "remark-math";
import RehypeKatex from "rehype-katex";
import { Emoji } from "emoji-picker-react";
import { IconButton } from "./button";
import styles from "./home.module.scss";
import { Markdown } from './markdown'
import SettingsIcon from "../icons/settings.svg";
import GithubIcon from "../icons/github.svg";
@@ -31,13 +27,6 @@ import { Settings } from "./settings";
import { showModal } from "./ui-lib";
import { copyToClipboard, downloadAs, isIOS } from "../utils";
export function Markdown(props: { content: string }) {
return (
<ReactMarkdown remarkPlugins={[RemarkMath]} rehypePlugins={[RehypeKatex]}>
{props.content}
</ReactMarkdown>
);
}
export function Avatar(props: { role: Message["role"] }) {
const config = useChatStore((state) => state.config);

14
app/components/markdown.tsx Normal file
View File

@@ -0,0 +1,14 @@
import ReactMarkdown from "react-markdown";
import "katex/dist/katex.min.css";
import RemarkMath from "remark-math";
import RehypeKatex from "rehype-katex";
import RemarkGfm from 'remark-gfm'
import RehypePrsim from 'rehype-prism-plus'
export function Markdown(props: { content: string }) {
return (
<ReactMarkdown remarkPlugins={[RemarkMath, RemarkGfm]} rehypePlugins={[RehypeKatex, RehypePrsim]}>
{props.content}
</ReactMarkdown>
);
}

12
app/layout.tsx
View File

@@ -1,5 +1,6 @@
import "./styles/globals.scss";
import "./styles/markdown.scss";
import "./styles/prism.scss";
export const metadata = {
title: "ChatGPT Next Web",
@@ -13,10 +14,13 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link rel="manifest" href="/site.webmanifest"></link>
</head>
<body>{children}</body>
</html>
);

4
app/store.ts
View File

@@ -24,7 +24,7 @@ export enum Theme {
}
export interface ChatConfig {
maxToken?: number;
maxToken?: number
historyMessageCount: number; // -1 means all
compressMessageLengthThreshold: number;
sendBotMessages: boolean; // send bot's message or not
@@ -282,7 +282,7 @@ export const useChatStore = create<ChatStore>()(
summarizeSession() {
const session = get().currentSession();
if (session.topic === DEFAULT_TOPIC) {
if (session.topic === DEFAULT_TOPIC && session.messages.length >= 3) {
// should summarize topic
requestWithPrompt(
session.messages,

4
app/styles/globals.scss
View File

@@ -117,13 +117,13 @@ input[type="checkbox"] {
border-radius: 5px;
height: 16px;
width: 16px;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]:checked::after {
display: block;
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--primary);

147
app/styles/prism.scss Normal file
View File

@@ -0,0 +1,147 @@
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #282a36;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6272a4;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ff79c6;
}
.token.boolean,
.token.number {
color: #bd93f9;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #50fa7b;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #f1fa8c;
}
.token.keyword {
color: #8be9fd;
}
.token.regex,
.token.important {
color: #ffb86c;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
@mixin light {
.markdown-body pre {
filter: invert(1) hue-rotate(50deg) brightness(1.3);
}
}
@mixin dark {
.markdown-body pre {
filter: none;
}
}
:root {
@include light();
}
.light {
@include light();
}
.dark {
@include dark();
}
@media (prefers-color-scheme: dark) {
:root {
@include dark();
}
}