color code.

[Alain De Vos]

I wanted to paste a part of html, but xenforo does not understand color tags. I prints them as plain text.
I would be nice to have functionality by xenforo to do coloring like the tool "texproc/bat".
I.e.
CODE=typescript
... your code ...
/CODE
And let Xenforo do the coloring.
Have pasted a png,
https://forums.freebsd.org/threads...cation-using-vite-preact.101900/#post-747803
Created with py-pygments.

 

[AlfredoLlaquet]

That already works.

#include <stdio.h>

int main(void) {
    char name[64];

    printf("Enter your name: ");
    if (scanf("%63s", name) != 1) {
        puts("Input error.");
        return 1;
    }

    printf("Hello, %s!\n", name);

    int sum = 0;
    for (int i = 1; i <= 10; i++) sum += i;
    printf("Sum of 1..10 = %d\n", sum);

    return 0;
}

Source:

[CODE=c]#include <stdio.h>


int main(void) {

    char name[64];


    printf("Enter your name: ");

    if (scanf("%63s", name) != 1) {

        puts("Input error.");

        return 1;

    }


    printf("Hello, %s!\n", name);


    int sum = 0;

    for (int i = 1; i <= 10; i++) sum += i;

    printf("Sum of 1..10 = %d\n", sum);


    return 0;

}[/ CODE]

 

[Alain De Vos]

it seems maybe some languages are known and others not.

 

[AlfredoLlaquet]

 

[SirDice]

Indeed. The [code]...[/code] bbcode already understands and syntax highlights a variety of languages.

it seems maybe some languages are known and others not.

At least the most common ones. Probably not for some of the more esoteric languages you've been trying though.

 

[Alain De Vos]

This is a tsx file but i said this is jsx. Seems ok if you know the trick.

import { render, h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import htm from 'htm';

const html = htm.bind(h);

// --- 1. STYLES (Keep the "ugly" strings out of your logic) ---
const styles = {
  terminal: "padding: 20px; background: #000; color: #0f0; font-family: 'Courier New', monospace; min-height: 100vh;",
  inputField: "background: #000; color: #0f0; border: 1px solid #0f0; font-family: monospace; outline: none; padding: 5px; width: 200px;",
  btn: "background: #0f0; color: #000; border: none; padding: 10px 30px; font-weight: bold; cursor: pointer; margin-top: 10px;"
};

// --- 2. SUB-COMPONENTS (Modular parts) ---
const Header = () => html`
  <h1 style="text-decoration: underline; margin-top: 0;">FREEBSD TS-CONSOLE</h1>
`;

const DisplayValue = ({ count }) => html`
  <p style="font-size: 2rem; margin: 10px 0;">VALUE: [ ${count} ]</p>
`;

const TerminalInput = ({ text, onInput }) => html`
  <div style="margin-bottom: 20px;">
    <label>> COMMAND: </label>
    <input
      type="text"
      value=${text}
      onInput=${(e) => onInput(e.target.value)}
      style=${styles.inputField}
      autoFocus
    />
    <p style="color: #0a0; font-size: 0.8rem;">LAST_INPUT: ${text || 'NONE'}</p>
  </div>
`;

// --- 3. MAIN APP (Clean and readable) ---
export function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  return html`
    <section style=${styles.terminal}>
      <${Header} />
    
      <${DisplayValue} count=${count} />
    
      <${TerminalInput} text=${text} onInput=${setText} />

      <button style=${styles.btn} onClick=${() => setCount(count + 1)}>
        INC_COUNTER
      </button>
    </section>
  `;
}

render(html`<${App} />`, document.getElementById('app')!);

 

[AlfredoLlaquet]

Haskell, Lisp, Pascal, and AutoHotkey are missing! Gosh darn it!