Cách đưa code vào tag, tag code nâng cao để highlight các ngôn ngữ!

[Kevin Hoang]

Với tag code cơ bản đó là [code] tương ứng với biểu tượng là: {c}.

Để đưa code vào tag code bạn cần thực hiện như hình vẽ sau:


Kết quả thu được sau khi thực hiện là:

#include<stdio.h>
#include<math.h>

void main()
{
    printf("Diễn đàn cộng đồng C Việt");
    printf("\nBạn đang ghé thăm cộng đồng lập trình lớn nhất Việt Nam");
}

Việc đưa code vào tag code là khá đơn giản, các bạn cố gắng để code vào trong tag code cho dễ xem hơn.

Ngay sau bài viết này, Dr sẽ giới thiệu cách sử dụng tag code highlight nâng cao, để hiển thị các code C, C++, C#, Delphi, VB, VB.NET, .....

[Kevin Hoang]

Hiện nay, diễn đàn cộng đồng C Việt hỗ trợ thêm một số tag code highlight cho một số ngôn ngữ sau: C, C++, C#, VB, VB.NET, Delphi, Pascal, SQL, ... Sau đây là cách sử dụng chúng:

Ở bài trên chúng ta đã biết cách đưa code vào tag code. Để có thể hiện thị đích xác ngôn ngữ nào bạn chỉ cần thêm tên ngôn ngữ và tag code đó, như sau:

Bạn muốn hiển thị một đoạn ngôn ngữ nào đó thì bạn bọc 2 đầu bằng tag code có dạng:
[code=language_name]
mã nguồn để ở đây
[ /code]

Các mẫu để hiển thị code như sau:

[code=C]
mã nguồn C để ở đây
[ /code]

[CODE=C++]
mã nguồn C++ để ở đây
[ /CODE]
[code=CPP]
mã nguồn C++ để ở đây
[ /code]

[code=VB.NET]
mã nguồn VB.NET để ở đây
[ /code]

[code=Visual Basic.NET#]
mã nguồn VB.NET để ở đây
[ /code]

[code=CSharp]
mã nguồn C# để ở đây
[ /code]

[CODE=C#]
mã nguồn C# để ở đây
[ /CODE]

-------------------------------------------------------------------------------------------------

Tips: Khi bạn copy code, nếu nó có màu mà bạn muốn nó trở về dạng text thường thì các bạn sử dụng công cụ: Gỡ bỏ các định dạng văn bản, bằng cách sau đây:

Bôi đen (selected) đoạn văn bản hoặc phần code bạn muốn gỡ bỏ định dạng, sau đó nhấn vào nút bấm có hình: , nằm ngay góc trên cùng bên trái của Editor

Trong tag code nâng cao, Dr có thử nghiệm và đưa vào chức năng trỏ đến hyper-link giúp cho việc tham khảo thuận lợi và dễ dàng hơn. Nhưng khi bạn copy có thể bạn sẽ có khả năng copy luôn cả link đó, dẫn đến việc bạn sử dụng tag code nâng cao không như ý muốn. Để khắc phục tình trạng này, bạn có thể sử dụng công cụ: "Gỡ bỏ liên kết" như sau:

Bạn bôi đen (on selected) đoạn code bạn đã copy, sau đó nhấn vào , mọi liên kết trong đoạn code được bôi đen đó sẽ bị loại bỏ.

Tips: Nếu bạn copy code đưa vào trình soạn thảo nâng cao của diễn đàn mà không muốn nó copy cả các định dạng chữ, cũng như các hyper-link nói trên. Hãy sử dụng công cụ: "Chuyển chế độ trình soạn thảo" như sau:

Ở góc phải phía trên trình soạn thảo có một nút bấm có hình nhìn hơi lõm xuống, di chcon trỏ chuột vào đó sẽ có dòng chữ: "Chuyển chế độ trình soạn thảo" hiện lên. Bạn nhấn vào đó, để nó trở về dạng bằng phẳng so với xung quanh là được.

Chúc các bạn vui vẻ! Hãy giới thiệu cách này cho những người bạn của bạn khi họ gửi code của họ lên diễn đàn cộng đồng C Việt.

[Kevin Hoang]

Danh sách các ngôn ngữ có thể gõ bằng nhiều cách khác nhau:

'ActionScript', 'ActionScript 2', 'ActionScript 2.0'
'ActionScript 3', 'ActionScript 3.0'
'Visual C#', 'Visual CSharp', 'C#', 'CSharp'
'JavaScript', 'JavaScript 1.2'
'Java ', 'Java 5'
'VB.NET', 'Visual Basic .NET'
'Visual C++', 'Visual C', 'VC', 'VC++'
'VB', 'Visual Basic'
'QT C++', 'CPP QT', 'C++ QT', 'QT-C++', 'QT-CPP', 'CPP-QT'
'C++', 'CPP', 'CPlusPlus'
'PHP', 'PHP4', 'PHP5'
'ASM', 'Assembly'
'C-MAC', 'C MAC', 'Objective C'
'ASP.NET', 'ASPNET'
'MySQL', 'My SQL'
'HTML 4', 'HTML', 'HTML 4 Strict'
'SQL', 'MSSQL'
'Oracle SQL', 'Oracle 11'

Ví dụ hiển thị code C:

/* Bai tap 4_1 - Giải phương trình bậc 2: AX^2 + BX + C = 0   * * Code lấy từ 500 bài tập C để làm mẫu                       */#include<stdio.h>#include<math.h> void main(){  float a, b, c, delta;   printf("\nGiai phuong trinh bac hai AX^2 + BX + C = 0");  printf("\nCho biet ba he so A B C : ");  scanf("%f%f%f", &a, &b, &c);   delta = b * b - 4 * a * c; //Tính Delta [MAX]  if (delta<0)    printf("Phuong trinh vo nghiem");  else if (delta == 0)      printf("Phuong trinh co nghiem kep x1 = x2 = %f", -b/(2*a));  else  {    printf("Phuong trinh co hai nghiem phan biet\nx1 = %f", (-b + sqrt(delta))/(2*a));    printf("\nx2 = %f", (-b - sqrt(delta))/(2*a));  }  getch();}

Ví dụ hiển thị code C++:

/* Code quá tải toán tử gán dùng chung của Rox_rook  * * Lấy làm mẫu cho hiển thị code C++                 */#include<iostream>#include<string>#include<typeinfo.h>#include<vector> class OS{protected :    std::string label;public :    OS(std::string label):label(label){}    virtual OS& operator = (const OS& os) {        label = os.label;        return *this;    }    virtual void show(std::ostream &) const = 0;}; class Window : public OS {public :    Window(std::string wLabel):OS(wLabel){}    virtual Window& operator = (OS* ptr)    {        if(dynamic_cast<Window*>(ptr) != 0)            return *this;        else{            dynamic_cast<OS* >(ptr);            return *this;        }    }    virtual void show(std::ostream &os) const{        os << "OS : " << label << '\n';    }}; class Linux : public OS {public :    Linux(std::string wLabel):OS(wLabel){}    virtual Linux& operator = (OS* ptr)    {        if(dynamic_cast<Linux*>(ptr) != 0)            return *this;        else{            dynamic_cast<OS* >(ptr);            return *this;        }    }    virtual void show(std::ostream &os) const{        os << "OS : " << label << '\n';    }}; void showAll(std::vector<OS* > &operating_system){    for(std::vector<OS* >::const_iterator iss = operating_system.begin();        iss != operating_system.end(); ++iss)    {        (*iss)->show(std::cout);    }} int main(){    std::vector<OS* > operating_system;    operating_system.push_back(new Window("Vista"));    operating_system.push_back(new Window("XP"));    operating_system.push_back(new Window("Window98"));    operating_system.push_back(new Linux("Unbutu"));    operating_system.push_back(new Linux("Fedora"));    operating_system.push_back(new Linux("RedHat"));        showAll(operating_system);    std::cout << "Hack product !!!^_^ \n\n";     //Wow Vista đã biến thành RedHat, what the hack T_T!    operating_system[0] = operating_system[5];    showAll(operating_system);     std::cout << '\n';    for(int x = 0; x < operating_system.size(); ++x){        std::cout << "Deleting : \n " << typeid(*operating_system[x]).name() << '\n';    }      return 0;}

Ví dụ hiển thị code C#:

/* Nhận biết Keyboard trong Runtime  * * Code lấy của bạn ..SiêuGà.NET::?? */#region Using Statementsusing System;using System.Collections.Generic;using Microsoft.Xna.Framework;using Microsoft.Xna.Framework.Audio;using Microsoft.Xna.Framework.Content;using Microsoft.Xna.Framework.Graphics;using Microsoft.Xna.Framework.Input;using Microsoft.Xna.Framework.Storage;#endregion public class GameKeyTestClass : Microsoft.Xna.Framework.Game{    GraphicsDeviceManager graphics;    ContentManager content;     KeyboardState oldState;     public GameKeyTestClass ()    {        graphics = new GraphicsDeviceManager( this );        content = new ContentManager( Services );         oldState = Keyboard.GetState();    }     protected override void Initialize()    {         base.Initialize();    }     protected override void LoadGraphicsContent( bool loadAllContent )    {        if (loadAllContent)        {         }     }     protected override void UnloadGraphicsContent( bool unloadAllContent )    {        if (unloadAllContent == true)        {            content.Unload();        }    }     protected override void Update( GameTime gameTime )    {        // Mặc định thoát game trong Xbox và Win        if (GamePad.GetState( PlayerIndex.One ).Buttons.Back == ButtonState.Pressed)            this.Exit();         UpdateInput();         base.Update( gameTime );    }     private void UpdateInput()    {        KeyboardState newState = Keyboard.GetState();         // Kiểm tra xem Space có bị Press không        if (newState.IsKeyDown( Keys.Space ))        {            // Key Space được Press        }        // Nếu không thì kiểm tra xem nó có Down trước đó không?        // có thẻ release sau đó        else if (oldState.IsKeyDown( Keys.Space ))        {           // Space bị Release rồi        }         oldState = newState;    }     protected override void Draw( GameTime gameTime )    {        graphics.GraphicsDevice.Clear( Color.CornflowerBlue );         base.Draw( gameTime );    }}

Hay một ví dụ hiển thị code Delphi:

{# Một đoạn code của bác TQN}{$R-}unit CRT32;{# freeware}{# version 1.0.0127}{# Date 18.01.1997}{# Author Frank Zimmer}{# description Copyright © 1997, Frank Zimmer, [email]100703.1602@compuserve.com[/email] Fixes Copyright © 2001 Juancarlo Añez, [email]juanco@suigeneris.org[/email] Version: 1.0.0119 Date:    18.01.1997  an Implementation of Turbo Pascal CRT-Unit for Win32 Console Subsystem tested with Windows NT 4.0 At Startup you get the Focus to the Console!!!!  ( with * are not in the original Crt-Unit): Procedure and Function:   ClrScr   ClrEol   WhereX   WhereY   GotoXY   InsLine   DelLine   HighVideo   LowVideo   NormVideo   TextBackground   TextColor   Delay             // use no processtime   KeyPressed   ReadKey           // use no processtime   Sound             // with Windows NT your could use the Variables SoundFrequenz, SoundDuration   NoSound   *TextAttribut     // Set TextBackground and TextColor at the same time, usefull for Lastmode   *FlushInputBuffer // Flush the Keyboard and all other Events   *ConsoleEnd       // output of 'Press any key' and wait for key input when not pipe   *Pipe             // True when the output is redirected to a pipe or a file  Variables:   WindMin           // the min. WindowRect   WindMax           // the max. WindowRect   *ViewMax          // the max. ConsoleBuffer start at (1,1);   TextAttr          // Actual Attributes only by changing with this Routines   LastMode          // Last Attributes only by changing with this Routines   *SoundFrequenz    // with Windows NT your could use these Variables   *SoundDuration    // how long bells the speaker  -1 until ??, default = -1   *HConsoleInput    // the Input-handle;   *HConsoleOutput   // the Output-handle;   *HConsoleError    // the Error-handle;  This Source is freeware, have fun :-)  History   18.01.97   the first implementation   23.01.97   Sound, delay, Codepage inserted and setfocus to the console   24.01.97   Redirected status} interfaceuses  Windows, Messages; {$IFDEF WIN32}const  Intense = FOREGROUND_INTENSITY or BACKGROUND_INTENSITY;  Black = 0;  Blue = FOREGROUND_BLUE or BACKGROUND_BLUE;  Green = FOREGROUND_GREEN or BACKGROUND_GREEN;  Cyan = Blue and Green;  Red = FOREGROUND_RED or BACKGROUND_RED;  Magenta = Blue or Red;  Brown = Green or Red;  LightGray = Blue or Green or Red;  DarkGray = LightGray;  LightBlue = Blue or Intense;  LightGreen = Green or Intense;  LightCyan = Cyan or Intense;  LightRed = Red or Intense;  LightMagenta = Magenta or Intense;  Yellow = Brown or Intense;  White = LightGray or Intense;   BackgroundMask = BACKGROUND_BLUE or BACKGROUND_GREEN or BACKGROUND_RED or BACKGROUND_INTENSITY;  ForegroundMask = FOREGROUND_BLUE or FOREGROUND_GREEN or FOREGROUND_RED or FOREGROUND_INTENSITY; function WhereX: integer;function WhereY: integer;procedure ClrEol;procedure ClrScr;procedure InsLine;procedure DelLine;procedure GotoXY(const x, y: integer);procedure HighVideo;procedure LowVideo;procedure NormVideo;procedure TextBackground(const Color: word);procedure TextColor(const Color: word);procedure TextAttribut(const Color, Background: word);procedure Delay(const ms: integer);function KeyPressed: boolean;function ReadKey: Char;procedure Sound;procedure NoSound;procedure ConsoleEnd;procedure FlushInputBuffer;function Pipe: boolean; procedure Restore; procedure SetWindowTo(R: TSmallRect); procedure More(const Text: string); var  HConsoleInput: tHandle;  HConsoleOutput: thandle;  HConsoleError: Thandle;  WindMin: tcoord;  WindMax: tcoord;  ViewMax: tcoord;  TextAttr: Word;  LastMode: Word;  SoundFrequenz: Integer;  SoundDuration: Integer; type  PD3InputRecord = ^TD3InputRecord;  TD3InputRecord = record    EventType: Word;    case Integer of      0: (KeyEvent: TKeyEventRecord);      1: (MouseEvent: TMouseEventRecord);      2: (WindowBufferSizeEvent: TWindowBufferSizeRecord);      3: (MenuEvent: TMenuEventRecord);      4: (FocusEvent: TFocusEventRecord);  end; {$ENDIF win32} implementation{$IFDEF win32}uses Classes, SysUtils; var  StartAttr: word;  OldCP: integer;  CrtPipe: Boolean;  German: boolean; procedure ClrEol;var  tC: tCoord;  Len, Nw: LongWord;  Cbi: TConsoleScreenBufferInfo;begin  GetConsoleScreenBufferInfo(HConsoleOutput, cbi);  len := cbi.dwsize.x - cbi.dwcursorposition.x;  tc.x := cbi.dwcursorposition.x;  tc.y := cbi.dwcursorposition.y;  FillConsoleOutputAttribute(HConsoleOutput, textattr, len, tc, nw);  FillConsoleOutputCharacter(HConsoleOutput, #32, len, tc, nw);end;

Mọi người thấy thế nào? Có chỗ nào thiếu sót, mọi người thông báo để bổ sung nhé.

[Kevin Hoang]

Nếu bạn muốn đưa ngôn ngữ nào lên, nếu nó không hỗ trợ highlight cho ngôn ngữ đó, nó sẽ trả về dạng tag code thường, không có highlight, nhưng các khoảng trống nó vẫn giữ nguyên.

Ví dụ:

/*--------------------------------------------------* SharedTicker.java** Example from the book:     Core J2ME Technology* Copyright John W. Muchow   [url]http://www.CoreJ2ME.com[/url]* You may use/modify for any non-commercial purpose*-------------------------------------------------*/import javax.microedition.midlet.*;import javax.microedition.lcdui.*; public class SharedTicker extends MIDlet implements CommandListener{  private Display display;    // Reference to Display object  private List lsProducts;   // Main productlist  private Alert alHelp;      // Alert to show text and image  private Ticker tkSale;     // Ticker of what's on sale  private Command cmExit;    // Command to exit the MIDlet   public SharedTicker()  {    display = Display.getDisplay(this);        cmExit = new Command("Exit", Command.SCREEN, 1);     tkSale = new Ticker("Current Sale: Torchiere Lamp only $29.00");     lsProducts = new List("Products", Choice.IMPLICIT);    lsProducts.append("Floor Lamp", null);    lsProducts.append("Chandelier", null);    lsProducts.append("Help", null);        lsProducts.addCommand(cmExit);    lsProducts.setCommandListener(this);    lsProducts.setTicker(tkSale);  }   public void startApp()  {    display.setCurrent(lsProducts);  }   public void pauseApp()  {   }   public void destroyApp(boolean unconditional)  {  }   public void showAlert()  {    try    {       // Create an image      Image im = Image.createImage("/help.png");       // Create Alert, add text and image, no sound      alHelp = new Alert("Help Information",                           "Over 300 unique lighting products!",                           im, null);      alHelp.setTimeout(Alert.FOREVER);                                alHelp.setTicker(tkSale);    }        catch(Exception e)    {      System.out.println("Unable to read png image.");    }        // Display the Alert. Once dismissed, return to product list    display.setCurrent(alHelp, lsProducts);         }   public void commandAction(Command c, Displayable s)  {        if (c == List.SELECT_COMMAND)    {      switch (lsProducts.getSelectedIndex())      {        case 0:          System.out.println("Floor Lamp selected");                      break;          case 1:          System.out.println("Chandelier selected");                      break;                  case 2:          showAlert();          break;      }    }    else if (c == cmExit)    {      destroyApp(true);      notifyDestroyed();    }  }}

Nếu bạn thấy có thiếu sót hoặc là cần thiết thế nào, các bạn cứ thoải mái góp ý. Xin cảm ơn!

[Kevin Hoang]

Đã hoàn thành cái highlight cho Visual C++. Sau đây là ví dụ:
Cú pháp:
1. Hoặc [CODE=VC++] Đặt code Visual C++ ở đây[ /CODE]
2. Hoặc [CODE=Visual C++] Đặt code Visual C++ ở đây[ /CODE]

#include<windows.h>LRESULT CALLBACK XulyMessage (HWND,UNIT,WPARAM,LPARAM);char szAppName [ ] = "Vidu";int WINAPI WinMain (HANDLE hInst, HANDLE hPrevInst,LPSTR lpszCmdLine, int nCmdShow){    HWND hwnd;  MSG msg;    WNDCLASSEX wndclass;    wndclass.cbSize = sizeof(wndclass);    wndclass.style = CS_HREDRAW | CS_VREDRAW;    wndclass.lpfnWndProc = XulyMessage;    wndclass.cbClsExtra = 0;    wndclass.cbWndExtra = 0;    wndclass.hInstance = hInst;    wndclass.hIcon = LoadIcon (NULL, IDI_APPLICATION);    wndclass.hCursor = LoadCursor (NULL, IDC_ARROW);    wndclass.hbrBackground = GetStockObject (WHITE_BRUSH);    wndclass.lpszMenuName = NULL;    wndclass.lpszClassName = szAppName;    wndclass.hIconSm = LoadIcon (NULL, IDI_APPLICATION);    RegisterClassEx(&wndclass);    hwnd = CreateWindow(szAppName,                    "Vi du mo dau",                    WS_OVERLAPPEDWINDOW,                    CW_USEDEFAULT, CW_USEDEFAULT,                    CW_USEDEFAULT, CW_USEDEFAULT,                    HWND_DESKTOP,                    NULL,                    hInst,                    NULL);    ShowWindow (hwnd, nCmdShow);    UpdateWindow (hwnd);    while (GetMessage (&msg, NULL, 0, 0))    {        TranslateMessage (&msg);        DispatchMessage (&msg);}return msg.wParam;}LRESULT CALLBACK XulyMessage (HWND hwnd, UINT iMsg,WPARAM wParam, LPARAM lParam){    HDC hdc;    PAINTSTRUCT ps;    RECT rect;    switch (iMsg)    {        case WM_PAINT:            hdc = BeginPaint (hwnd, &ps);            GetClientRect (hwnd, &rect);            DrawText (hdc, "Lap trinh C for Win", -1, &rect, DT_SINGLELINE | DT_CENTER | DT_VCENTER);            EndPaint (hwnd, &ps);            break;        case WM_DESTROY:            PostQuitMessage(0);            break;        default:            return DefWindowProc (hwnd, iMsg, wParam, lParam);}return 0;}

Chúc anh em vui vẻ hen!

[Kevin Hoang]

Kevin xin mở lại đề tài này để nhận các ý kiến và thông báo lỗi về module này, cùng các ý tưởng để làm nó tốt hơn, hiệu quả hơn. Nếu bạn nào phát hiện ra bất kỳ lỗi nào, xin thông báo để chúng tôi để chúng tôi tiến hành khắc phục sớm nhất có thể.

Các bạn vui lòng không yêu cầu: xin, mua bán, trao đổi, ... về module này. Đây là tâm huyết Kevin muốn dành riêng cho các thành viên của cộng đồng C Việt, vì thế sẽ không có bất kỳ mức giá nào có thể làm động lòng được.

Các bạn nên sử dụng chức năng này khi gửi source code lên cộng đồng C Việt. Điều này góp phần cho việc bảo vệ bài viết của cộng đồng C Việt không bị các công ty quảng cáo lừa đảo sử dụng công cụ copy bài viết tự động.

Xin trân trọng cảm ơn!

[lequochoang2]

1 module hữu ích
Góp ý 1 chút về cái VC++
em thấy nên để các kiểu dữ liệu khác với chuẩn (dạng typedef ý) và các marco thành màu khác cho dễ nhìn chứ nhìn toàn màu xanh dương dễ nhầm lẫn và hơi chói mắt ^^

[soujiro_seta]

Sao mình tag code ASP.NET mà nó không tô màu lên được vậy?

[Kevin Hoang]

Ah, ngôn ngữ ASP.NET chưa được phát triển. Các bạn có thông tin về keywords, cú pháp của ASP.NET thì gửi cho Kevin nhé!

@lequochoang2: Ok, Kevin sẽ tính toán để đổi màu các typedef

[Wazi Armstrong]

Mình toàn gõ thủ công và thấy chẳng vấn đề gì cả. Chắc tại dạo trước làm web gõ html nhiều