- I hone my problem solving and coding skills all the time. I try to learn the underlying - mechanics and use abstractions where relevant. -
-- I try to create better, novel ways to approach problems and give my best to present them - in a clear and concise manner. -
-- From my experience with a wide range of roles I understand the how to communication with - stakeholders across an organization. -
-+ I possess a wide range of skills that enable me to develop visually appealing and + interactive user interfaces for web applications. +
++ Over the years, I have honed my ability to create visually appealing interfaces that + are both user-friendly and intuitive. +
++ I understand the importance of creating a seamless UX for end-users. Which includes + a solid understanding user behavior. +
+${lang}${lines.map(lineRenderer(options)).join('\n')}\n`;
-}
-
-const lineRenderer = (options) => (line) => {
- const output = line.map(tokenRenderer(options)).join('');
- const { leadingWS, content, trailingWS } = splitLeadingAndTrailingWS(output);
- return `${leadingWS || ''}${content || ''}${
- trailingWS || ''
- }`;
-};
-
-const tokenRenderer = (options) => (token) => {
- if (!token.color || token.color.toLowerCase() === options.fg) {
- return escape(token.content);
- }
- const { leadingWS, content, trailingWS } = splitLeadingAndTrailingWS(token.content);
- if (!content) {
- return leadingWS;
- }
-
- return `${leadingWS}${escape(content)}${trailingWS}`;
-};
-
-function splitLeadingAndTrailingWS(content) {
- const len = content.length;
- let start = 0;
- let end = len;
-
- while (start < end && isWS(content.charAt(start))) {
- start++;
- }
-
- if (start === end) {
- return {
- leadingWS: content || ''
- };
- }
-
- while (end > start && isWS(content.charAt(end - 1))) {
- end--;
- }
-
- return {
- leadingWS: content.slice(0, start),
- content: content.slice(start, end),
- trailingWS: end < content.length ? content.slice(end) : ''
- };
-}
-
-function isWS(char) {
- return char === ' ' || char === '\t';
-}
-
-function isPlaintext(lang) {
- return !lang || ['plaintext', 'txt', 'text'].indexOf(lang) !== -1;
-}
-
-const defaultOpts = {
- theme: 'nord',
- fg: undefined,
- bg: undefined,
- showLineNumbers: (numberOfLines) => numberOfLines > 5
-};
-
-export default async function createHighlighter(opts) {
- const options = { ...defaultOpts, ...opts };
-
- if (options.theme.endsWith('.json')) {
- options.theme = loadTheme(options.theme);
- } else {
- options.theme = getTheme(options.theme);
- }
- const baseSettings = (
- (options.theme['tokenColors'] || []).find((x) => !x.scope) || { settings: {} }
- ).settings;
- const colors = options.theme.colors || {};
- const getThemeColor = (name) => baseSettings[name] || colors[`editor.${name}`] || colors[name];
- const fg = (options.fg || getThemeColor('foreground') || '#eeeeee').toLowerCase();
- const bg = (options.bg || getThemeColor('background') || '#222222').toLowerCase();
- return getHighlighter(options).then(
- (highlighter) => (code, lang) =>
- render(
- isPlaintext(lang)
- ? [[{ content: code }]]
- : highlighter.codeToTokensBase(code, lang),
- { ...options, fg, bg, lang }
- )
- );
-}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 27226db..58026c4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,26 +1,48 @@